rn-classnames
Conditionally concatenate react-native
StyleSheet
-Objects together
Install
$ npm install rn-classnames
Usage
const style = StyleSheet; const cn = ; // Possible usage // Infinity arguments // Supports computed keysconst ai = 'ai';;;; // Nested array, but i dont recommend this, looks confusing // Removes not found / available styles // Ignores not supported types;
API
The API is highly inspired by
classnames
classNames()
className(
StyleSheet: Object
)
Pass your react-native StyleSheet
returns picker: Function
picker()
cn(
arguments: String|Array|Object
)
Pass the classNames you want to pick, you can choose between String
Array
and / or Object
.
Only truthy keys in a Object
will be included.
All other types are ignored.
returns concatenatedStyleSheets: Array
Example
import View Text StyleSheet Platform from 'react-native';import classnames from 'rn-classnames'; const style = StyleSheet; const cn = ; hide <View => <Text>Hello World!</Text> </View>
FAQ
classnames
and class-names
?
How is it different from - It works with
react-native
since it concatenates the style-objects instead joining the classNames into a string. - Doesn't support dedupe since it bloats the code only for this usecase (if you disagree create an issue)
- Extreme lightweight
It doesnt work in my web-react app
rn-classnames
makes sense in react-native, if you want something for your non-react-native-app checkout:
Is it possible to have the stylings in another file?
Yup, thats how i use it
style.js
; const style = StyleSheet;
component.js
import Platform from 'react-native';import classnames from 'rn-classnames';import style from './style'; const cn = ; hide <View => <Text>Hello World!</Text> </View>
License
MIT © Entwicklerstube