andywer / andywer/react-usestyles

New API

Aberta
#5 3 comentários 0 reações 0 responsáveis Ver no GitHub
enhancement
Linguagem predominante
JavaScript
Estrelas
86
Forks
2
Métricas de merge de PRs
Nenhum PR com merge em 30d

Descrição

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

Guia de contribuição

Nenhum guia de contribuição indexado para este repositório

Avaliação

Esta issue ainda não foi avaliada.

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.