https://github.com/tobua/stylesnames
Util to Conditionally Apply Styles for React and React-Native.
https://github.com/tobua/stylesnames
Last synced: 3 months ago
JSON representation
Util to Conditionally Apply Styles for React and React-Native.
- Host: GitHub
- URL: https://github.com/tobua/stylesnames
- Owner: tobua
- Created: 2018-09-17T21:49:43.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-10-15T21:52:09.000Z (over 4 years ago)
- Last Synced: 2025-02-15T11:39:17.485Z (3 months ago)
- Language: JavaScript
- Homepage: https://npmjs.com/stylesnames
- Size: 66.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# stylesnames
style**s**names conditionally applies style objects for react and react-native
similar to how classes can be combinded in react with [classnames](https://github.com/JedWatson/classnames).
## Installation
```
npm i stylesnames
```
## Usage
```js
import stylesnames from 'stylesnames'
const styles = stylesnames.bind({
// Any object with style objects inside.
})
const result = styles(
'title',
'paragraph',
{
disabled,
},
{
highlight: true,
focus: value === 5,
}
)
// result will be an array with all the style objects that apply. If disabled is
// false it won't be in the resulting array. highlight will always be added,
// while focus is only present if value is equal to 5.
```
### React
```jsx
import React, { Component } from 'react'
import stylesnames from 'stylesnames'
const styles = stylesnames.bind({
button: {
backgroundColor: 'red',
},
disabled: {
opacity: 0.5,
},
})
export default class FakeButton extends Component {
render() {
const { disabled, label } = this.props
return
{label}
}
}
```
This will result in the following styles being applied:
``
```
backgroundColor: red;
```
``
```
backgroundColor: red;
opacity: 0.5;
```
### React Native
```jsx
import React, { Component } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import stylesnames from 'stylesnames'
const styles = stylesnames.bind(
StyleSheet.create({
button: {
backgroundColor: 'red',
},
disabled: {
opacity: 0.5,
},
})
)
export default class FakeButton extends Component {
render() {
const { disabled, label } = this.props
return (
{label}
)
}
}
```
The result will be the same as for the `react` example.
## License
MIT