rn-classnames

Conditionally concatenate react-native StyleSheet-Objects together

Install

$ npm install rn-classnames

Usage

const style = StyleSheet.create({
  main: {
    background: 'hotpink'
  },
  text: {
    color: 'red'
  }
});

const cn = classnames(style);

// Possible usage
cn('main')
cn({ main: true })
cn(['main'])

// Infinity arguments
cn('main', { text: true }, 'hello', ['world'], { foobar: true }, [ 'example' ])

// Supports computed keys
const ai = 'ai';
cn(`m${ai}n`);
cn({ [`m${ai}n`]: true });
cn([`m${ai}n`]);

// Nested array, but i dont recommend this, looks confusing
cn('test', [['hello_world', ['main'], 'foobar'], [{ text: true }]])

// Removes not found / available styles
cn(['this', 'classNames', 'will', 'not', 'appear'])

// Ignores not supported types
cn(false, true, new Date(), 123, null, undefined, Symbol(), () => "i'am a function");

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.create({
  main: {
    paddingTop: 10
  },
  // alternative to "Platform.select"
  android: {
    background: 'green'
  },
  ios: {
    background: 'grey'
  },
  hide: {
    opacity: 0
  }
});

const cn = classnames(style);

export default ({ hide }) => (
  <View style={ cn('main', [ Platform.OS ], { hide }) }>
    <Text>Hello World!</Text>
  </View>
)

FAQ

How is it different from classnames and class-names?

• 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:

• classnames
• class-names

Is it possible to have the stylings in another file?

Yup, thats how i use it

style.js

import  { Stylesheet } from 'react-native';

const style = StyleSheet.create({
  main: {
    background: 'hotpink'
  }
});

component.js

import { Platform } from 'react-native';
import classnames from 'rn-classnames';
import style from './style';

const cn = classnames(style);

export default ({ hide }) => (
  <View style={ cn('main') }>
    <Text>Hello World!</Text>
  </View>
)

License

MIT © Entwicklerstube