Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/team-griffin/stylr
async css-in-js for react
https://github.com/team-griffin/stylr
Last synced: about 1 month ago
JSON representation
async css-in-js for react
- Host: GitHub
- URL: https://github.com/team-griffin/stylr
- Owner: team-griffin
- Created: 2019-08-30T18:17:34.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T09:07:42.000Z (almost 2 years ago)
- Last Synced: 2024-11-11T20:44:47.528Z (about 1 month ago)
- Language: TypeScript
- Size: 1.24 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @ux/stylr
## useStyles
```ts
(
stylesheet: {
[modifier: string]: {
[namespace: string]: {
[cssProperty: string]: string | number
}
}
},
modifiers: object | object[]
) => {
styles: object
}
```
- async style loading
- memoized so we do as few recalculations as possible
- runtime vendor prefixing (only adds prefixes needed by the current browser)
### Usage
```ts
// default
const { styles } = useStyles({
default: {
root: {
color: '#000'
}
}
});
```
```ts
// modifiers
const { styles } = useStyles({
default: {
root: {
color: '#000'
}
},
invert: {
root: {
color: '#FFF'
}
}
}, {
invert: true
})
```
```ts
// key-value modifiers
const { styles } = useStyles({
default: {
root: {
color: '#CCC'
}
},
'theme.light': {
root: {
color: '#000'
}
},
'theme.dark': {
root: {
color: '#FFF'
}
}
}, {
theme: props.theme
})
```
```ts
// async modifiers
const { styles } = useStyles({
default: {
root: {
color: '#CCC'
}
},
'theme.light': () => import('./light'),
'theme.dark': () => import('./dark')
}, {
theme: props.theme
});
```
### caveats
- due to memoization techniques, any props used by your stylesheet should be passed in as modifiers, otherwise it will not know to recompute the styles when they change
## withInteraction
(alias withHover)
```ts
(WrappedComponent) => Component
```
### usage
```tsx
const Interactive = withInteraction((props) => {
return (
{props.hover ? 'Hovering' : ''}
{props.focus ? 'Focused' : ''}
{props.active ? 'Active' : ''}
{/* when you want the same style for hover and focus */}
{props.hocus ? 'Hocus' : ''}
);
});
```
### removeInteraction
A hook which omits the props from withInteraction. Use when you want the interaction props for the stylesheet but then to exclude from the actual component; where you use in a component that spreads props you may get `Received "false" for a non-boolean attribute` console warnings if you don't do this.