@dyst/native
v0.0.5
Published
Dynamic Css-in-Js styles engine, based on Emotion for React-Native
Downloads
150
Maintainers
Readme
🏃♀ Dynamic Styles
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: dynamic theming, etc.
- ✅ Fully featured TypeScript 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 { styles } = useStyles({ color: props.color, fontSize: 10 });
return (
<div style={styles.root}>
{/* */}
</div>
);
}
💻 Installation
$ yarn add @dyst/native @emotion/react @emotion/native
# or
$ npm install @dyst/native @emotion/react @emotion/native
⛳️ Code Sandbox
🪁 Basic usage
Learn more here