0 0

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:

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

Happy

0 0 %

Sad

0 0 %

Excited

0 0 %

Sleepy

0 0 %

Angry

0 0 %

Surprise

0 0 %

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

www.techdevil.in