https://github.com/dantehemerson/slsx
:nail_care: A tiny utility for constructing React Native Web styles conditionally
https://github.com/dantehemerson/slsx
classes clsx library react-native react-native-library styles stylesheet
Last synced: 2 months ago
JSON representation
:nail_care: A tiny utility for constructing React Native Web styles conditionally
- Host: GitHub
- URL: https://github.com/dantehemerson/slsx
- Owner: dantehemerson
- License: mit
- Created: 2020-02-23T08:19:52.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-04-04T17:38:07.000Z (about 5 years ago)
- Last Synced: 2025-04-14T18:12:25.761Z (2 months ago)
- Topics: classes, clsx, library, react-native, react-native-library, styles, stylesheet
- Language: JavaScript
- Homepage:
- Size: 6.84 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# slsx
> A tiny utility for constructing React Native styles conditionally
> DISCLAIMER: At this moment it only works with `react-native-web`.
This module is based on [`clsx`](https://github.com/lukeed/clsx).
This module is available in three formats:
* **ES Module**: `dist/slsx.m.js`
* **CommonJS**: `dist/slsx.js`
* **UMD**: `dist/slsx.min.js`
## Install
```
npm install --save slsx
```
or
```
yarn add slsx
```
## Usage
```js
import slsx from 'slsx';
// Your styles
const styles = StyleSheet.create({
foo: {
backgroundColor: 'red'
},
bar: {
fontSize: 18
},
baz: {
borderColor: 4
},
bat: {
width: 80
},
qux: {
marginVertical: 20
},
det: {
paddingVertical: 10
},
met: {
paddingHorizontal: 20
}
});
// => = 'similar to'
slsx(styles.foo, true && styles.bar, styles.baz);
//=> [styles.foo, styles.bar, styles.baz]
slsx({ [styles.foo]: true, [styles.bar]: false, [styles.baz]: isTrue() });
//=> [styles.foo, styles.baz]
// Objects
slsx({ [styles.foo]: true }, { [styles.bar]: false }, null);
//=> [styles.foo]
// Arrays
slsx([styles.foo, null, false, styles.bar]);
//=> [styles.foo, styles.bar]
// Arrays (variadic)
slsx(
[styles.foo],
['', null, false, styles.bar],
[[styles.baz, [[styles.bat]]]]
);
//=> [styles.foo, styles.bar, styles.baz, styles.bat]
// Kitchen sink (with nesting)
slsx(
styles.foo,
[
1 && styles.bar,
{
[styles.baz]: false,
[styles.bat]: null
},
[styles.qux, [styles.det]]
],
styles.met
);
//=> [styles.foo, styles.bar, styles.qux, styles.det, styles.met]
```
You can also [test on Codesanbox](https://codesandbox.io/s/slsx-example-mi32b)
## API
### slsx(...input)
Returns: `number[]`
#### input
Type: `Mixed`
The `slsx` function can take ***any*** number of arguments, each of which can be an Object, Array, Boolean, or String.
> **Important:** _Any_ values that cannot be transformed into numbers or are negative numbers are discarded!
```js
slsx(-123, true, false, '', null, undefined, NaN, '-77', 'bar', 'baz');
//=> ''
```
## License
MIT © [Dante Calderon](https://dantecalderon.dev)