Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@dyst/react

bennodev199MIT0.0.5TypeScript support: included

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

react, emotion, emotionjs, styles, css, tss, jss

readme

🏃‍♀ 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) `jsx // 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

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

⛳️ Code Sandbox

🪁 Basic usage

Learn more here

changelog