Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

rn-classes

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rn-classes

Utility function to wrap around a StyleSheet.create in react-native and get a function to merge the objects. Differently from other packages it provides cascading and a good typing support.

  • 0.0.6
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1
Maintainers
1
Weekly downloads
 
Created
Source

MIT License

npm bundle size

npm

npm

GitHub last commit

rn-classes

Utility function that takes an object as input and let you merge different properties into a single object with a class-like definition. It's meant to be used as a quick way to style your react native component.

Installation

You can install it with your package manager of choiche like this.

npm i rn-classes
yarn add rn-classes
pnpm i rn-classes

Usage

import { StyleSheet, Text, View } from "react-native";
import { createStyles } from "rn-classes";

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  item: {
    borderWidth: 1,
    borderColor: "blue",
  },
  selected: {
    borderColor: "red",
  }
});

const classes = createStyles(styles);

export function Test() {
  return (
      <View style={classes("container")}>
          <Text style={classes("item selected")}>Selected item</Text>
          <Text style={classes("item")}>Item</Text>
      </View>
    </>
  );
}

You can pass to the classes function everything you could pass to clsx so, straight from their documentation

import clsx from 'clsx';
// or
import { clsx } from 'clsx';

// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'

// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'

// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'

// Arrays
clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'

// Arrays (variadic)
clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);
//=> 'foo bar baz hello there'

// Kitchen sink (with nesting)
clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');
//=> 'foo bar hello world cya'

What you will get back is an object that you can pass to the style tag of a react native component.

Why not use [insert package name here]?

There are already countless packages that do a similar thing but they either are not typed very well (with rn-classes you get very good autocomplete based on the shape of your styles) or they don't actually provide a "cascade-like" experience like we have in regoular CSS.

In rn-classes infact if a "class" is declared after another it will have precedence.

For example let's say that you have your styles declared as such

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  item: {
    borderWidth: 1,
    borderColor: "blue",
  },
  selected: {
    borderColor: "red",
  }
});

adding the class classes("item selected") or the class classes("selected item") will produce the same

{
    borderWidth: 1,
    borderColor: "red",
}

Keywords

FAQs

Package last updated on 16 Dec 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc