Skip to content
/ restyles Public

πŸ‘©β€πŸš€ declarative glamor for react and preact

License

Notifications You must be signed in to change notification settings

tkh44/restyles

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

29 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

restyles

Declarative glamor

Write styles scoped to your component and use standard css selectors to target children. Due to its tiny size, restyles makes the perfect companion for glamorous.

npm version Build Status codecov

Install

npm install -S restyles

Basic Usage

const Profile = props => (
  <Style
    css={{
      color: 'blue',
      ':hover': {
        color: 'red'
      },
      '& .profile': {
        color: props.online ? 'green' : 'gray',
        fontSize: 20,
        '@media (min-width: 768px)': {
          color: 'aquamarine'
        }
      }
    }}
    render={cls => (
      <div className={cls}>
        This will be blue until hovered.
        <div className="profile">
          This font size will be 20px
        </div>
      </div>
    )}
  />
)

Props

children fn

Function to render your children. Its only argument is a class name that you can apply to an element of your choice. Usually this is the outermost element(s) of your children.

render takes precedence over children

use render for better performance

css object|array<object>

Your css as an object. This is passed straight through to cxs.

glamor docs

const Profile = props => (
  <Style
    css={{
      color: 'blue',
      '& .profile': {
        color: 'red',
        '& .username': {
          color: 'green',
          '& .three': {
            color: 'gray',
            '& .inner': {
              color: 'rebeccapurple',
              fontSize: 20
            }
          }
        }
      },
      ':hover': {
        '& .three': {
          color: 'black'
        }
      },
      ':active': {
        '& .inner': {
          color: 'purple',
          fontSize: 20
        }
      },
      ':before': {
        content: '" "',
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        backgroundColor: 'blue'
      },
      '@media (min-width: 500px) and (orientation: landscape)': {
        '& .inner': {
          color: 'purple',
          fontSize: 48
        }
      }
    }}
    render={cls => (
      <div className={cls}>
        blue
        <div className={'profile'}>
          red
          <div className={'username'}>
            green
            <div className={'three'}>
              <span className={'inner'}>test</span>
            </div>
          </div>
        </div>
      </div>
    )}
  />
)

render fn

takes precedence over children

Function to render your children. Its only argument is a class name that you can apply to an element of your choice. Usually this is the outermost element(s) of your children.

const Greeting = ({ name }) => (
  <Style
    css={{
      color: '#63e6be',
      fontSize: 48,
      letterSpacing: '1ch',
      ':hover': {
        color: '#0ca678'
      }
    }}
    render={cls => <h1 className={cls}>Hello {name}</h1>}
  />
)

About

πŸ‘©β€πŸš€ declarative glamor for react and preact

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published