Skip to content

tkh44/glamorous-pseudo

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

glamorous-pseudo

npm version Build Status codecov

Install

npm install -S glamorous-pseudo

Basic Usage

<Pseudo
  after={{ content: '" after"', color: 'red' }}
  before={{ content: '"before "', color: 'green' }}
  focus={{ color: 'blue' }}
  hover={{ color: 'purple' }}
  active={{ fontSize: '0.8em' }}
  visited={{ color: '#5EDA7E' }}
  display="block"
  width={300}
  textAlign="center"
>
  <h1>Hello</h1>
</Pseudo>

// Create your own ui library
const A = (props) => <Pseudo {...props} component={glamorous.A} />

<A
  hover={{ color: '#a9e34b' }}
  href="https://startup.com"
>
  Startup
</A>

Props

component GlamorousComponent

glamorous.Div, glamorous.A, glamorous.Span, ...

Any props passed to Pseudo will be passed through to component

after object

:after styles

before object

:before styles

focus object

:focus styles

hover object

:hover styles

active object

:active styles

visited object

:visited styles

About

Pseudo component to extend built-in GlamorousComponents

Resources

License

Stars

Watchers

Forks

Packages

No packages published