An "atomic CSS" style toolkit for React Native
0 0
Read Time:1 Minute, 49 Second

consistencss

An “atomic CSS” style toolkit for React Native, inspired by tailwind CSS

How to Install:

Install Using NPM:

npm install consistencss

Or Install using YARN:

yarn add consistencss

How To Troubleshoot:

See Troubleshooting Guide.

Demo Usage:

import { View } from 'react-native';
import C, { apply } from 'consistencss';

// ...
const App = () => {
  return (
    <View style={apply(C.m4, C.p2, C.bgRed)}>
      <Text style={C.textRed}></Text>
      <Text style={[C.textBlue, C.m6]}></Text>
      <Text style={styles.subtitle}></Text>
    </View>
  );
};

// apply also accepts strings
const styles = {
  title: apply(C.font6, C.uppercase),
  subtitle: apply('capitalize', C.mt2),
};

Set your theme using extend

import { View } from 'react-native';
import C, { apply, extend } from 'consistencss';

extend({
  colors: {
    primary: 'cornflowerblue',
    secondary: 'green',
    randomcolor: '#f2d687',
  },
});

const App = () => {
  return (
    <View style={apply(C.bgPrimary)}>
      <View style={apply(C.bgRandomcolor)}></View>
    </View>
  );
};

or change the default base size (4):

import { Text, View } from 'react-native';
import C, { apply, extend } from 'consistencss';

// the default base is 4, so m4 = margin: 16
// m2 = margin: 8

extend({
  sizing: {
    base: 2,
  },
});

// chaging to 2, m4 = margin: 8
// m2 = margin: 4

const App = () => {
  return <View style={apply(C.mt4)}></View>;
};

even you could set default styles for components, like View, Text and Touchable Opacity

import C, { apply, extend, View } from 'consistencss';

extend({
  components: {
    View: apply(C.bgYellow, C.p4),
  },
});

const App = () => {
  // we import View from consistencss
  // and this have a default style
  return <View></View>;
};

Uses the classNames API, and create your custom classes !

import C, { apply, extend, classNames, View, Text } from 'consistencss';

extend({
  classes: {
    debug: apply(C.border1, C.borderRed),
  },
});

const App = () => {
  return (
    <View style={C.debug}>
      <Text style={classNames('debug')}>
        ...
      </Text>
    </View>;
};

 

Github:

If You Have Any Problem Or Doubts,
Please Do Ask Or Suggest In Comment.


Do Follow Us on:

Facebook.com

Twitter.com

Also Checkout: React Native background service library for running background tasks forever

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

By Akash Kothari

I am passionate about my work. Because I love what I do, I have a steady source of motivation that drives me to do my best. In my last job, this passion led me to challenge myself daily and learn new skills that helped me to do better work

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

One thought on “An “atomic CSS” style toolkit for React Native

Leave a Reply

Discover more from TechDevil

Subscribe now to keep reading and get access to the full archive.

Continue reading