andywer / andywer/react-usestyles

New API

Ouverte
#5 3 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
enhancement
Langage dominant
JavaScript
Étoiles
86
Forks
2
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

## 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.

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.