@dyst/react
TypeScript icon, indicating that this package has built-in type declarations

0.0.5 • Public • Published

🏃‍♀ Dynamic Styles

Banner

Dynamic Css-in-Js styles engine, based on Emotion


Create dynamic stylesheets and link them to functional components using the React hook pattern.

  • Build on top of @emotion/react: As fast and lightweight as emotion
  • Supports all emotion features: lazy evaluation, dynamic theming, etc.
  • Fully featured TypeScript support
  • Server side rendering support: Next.js, Gatsby or any other environment
  • @emotion cache support
  • 🟨 Well tested (working on it)
// Create dynamic stylesheet that has access to the previously specified theme and parameters
const useStyles = styleSheet.create(({theme, params}) => ({
    root: /* Dynamic Styles */,
    button: /* Dynamic Styles */,
    text: /* Dynamic Styles */,
}));

const MyComponent = (props) => {
    // Access dynamic styles as class names using the created 'useStyles()' hook 
    // and specify the corresponding parameters
    const { classes } = useStyles({ color: props.color, fontSize: 10 });
    
    return (
      <div className={classes.root}>
          {/* */}
      </div>
    );
}

💻 Installation

$ yarn add @dyst/react @emotion/react @emotion/native
# or
$ npm install @dyst/react @emotion/react @emotion/native

⛳️ Code Sandbox

🪁 Basic usage

Learn more here

Package Sidebar

Install

npm i @dyst/react

Weekly Downloads

1

Version

0.0.5

License

MIT

Unpacked Size

79.9 kB

Total Files

20

Last publish

Collaborators

  • bennodev