0.0.3 • Published 5 years ago
react-use-style v0.0.3
🛠 Status: In Development
useStyle is currently in development. v0.1 is on its way to be released mid-February.
useStyle
React hook applying scoped CSS to a component.
Goal
Providing the simplest and viable way of introducing CSS into React applications. No external dependencies. Just a hook.
Installation
npm users
npm install react-use-style
yarn users
yarn add react-use-style
How to use
Static styles
import { useStyle, css } from "react-use-style";
function Example() {
const style = useStyle(css`
.red {
color: red;
font-weight: bold;
}
`);
return <p className={style.red}>Lorem ipsum dolor sit amet.</p>;
}
Dynamic Styles with Themeing
import { useStyle, css } from "react-use-style";
function Example() {
const theme = useContext(ThemeContext);
const style = useStyle(css`
.red {
color: ${theme.red};
font-weight: ${theme.fontBold};
}
`);
return <p className={style.red}>Lorem ipsum dolor sit amet.</p>;
}
1.0 Roadmap
- TypeScript support ✅
- Static CSS generation ✅
- Dynamic CSS generation ☑️
- SSR support ☑️
- Documentation ☑️
- Website ☑️