andywer / andywer/react-usestyles

New API

Abierto
#5 3 comentarios 0 reacciones 0 asignados Ver en GitHub
enhancement
Lenguaje dominante
JavaScript
Estrellas
86
Forks
2
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.