andywer / andywer/react-usestyles
New API
- 主要言語
- JavaScript
- スター
- 86
- フォーク
- 2
- PR マージ指標
- 30日以内にマージされた PR はありません
説明
## Proposal for API change
This is a draft for an updated API, based on the experiences made with the current API and its limitations (like #1), the discussions in #2 and other styling hook implementations like [react-jss](https://cssinjs.org/react-jss/?v=v10.0.0-alpha.23#basic).
```jsx
import styleHooks from "@andywer/react-usestyles"
const { useCSS, useStyle, useStyles } = styleHooks()
function MyButton(props) {
const className = useStyle({
background: props.color,
color: "white",
padding: "0.5em 1em"
}, [props.color])
return (
{props.children}
)
}
// or
function MyButton() {
const css = useCSS()
return (
{props.children}
)
}
```
## Benefits
- `styleHooks()` call allows clear static injection order
- `styleHooks()` allows grouping stylesheets by component file, allowing easier optimizations
- `useStyles()` API is now consistent with other React.js hooks
- `useCSS()` as a simple solution to define the styles "inline" in the JSX element
- No need to [wrap dynamic values in functions](https://github.com/andywer/react-usestyles/blob/master/packages/style-hook/README.md#dynamic-styles--themes) anymore
## Details
Can optionally pass a label to `styleHooks()`, like `styleHooks("Button")`, to give the CSS classes readable names in development for a better debugging experience.
Dynamic values would now be allowed to be put in styles directly, without a function as with the old API (`color: () => props.color`). This will prevent us from splitting the dynamic rules from the static ones in a CSS class, but that was mostly done to improve the performance before.
My assumption is that the new API with the initial `styleHooks()` call in each component file will allow better performance anyway and will reduce the impact of that dynamic/static optimization to more or less zero. So let's give it a try and aim for a more convenient API.
## Relation to other styling libs
Should be able delegate the actual styling to one of those well-known and widespread styling libraries:
- Emotion
- JSS
- Styled Components
Static style extraction á la [Linaria](https://github.com/callstack/linaria) is considered out-of-scope. It is a cool project and interesting concept, but we are aiming for a solution that works for the majority of the CSS-in-JS users and without any custom Babel or Webpack setup.
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
評価
この issue はまだ評価されていません。