rnc
react-native-css-tree
npm i react-native-css-tree
rnc

react-native-css-tree

Inheritable dynamic style tree.

by Michael Lin

1.0.3 (see all)License:MITTypeScript:Not Found
npm i react-native-css-tree
Readme

react-native-css-tree

Travis Coverage Status npm npm npm

This is a react-native style module plug-in that features a modular JSON object tree structure.

Features

  • Customizable Inheritance Middleware.
  • Style tree namespaces.
  • Global variables.
  • Priority inheritance.
  • Functional CSS.

Installation

npm install --save react-native-css-tree

Usage

import cssTree from 'react-native-css-tree';

const styles = cssTree({ //globalStyle
    grid:10,
    base:{
        size: 10,
    }
})((key, parent, sub)=>{ //middleware
    return sub;
})({
    container:{
        flex: 1,
        margin: "$grid",
        padding: 5,
        _box:{
            height: 100,
        },
        text:(color)=>({
            color,
            fontSize: "$base.size"
        })
    },
});

<View style={styles.container}>
    <View style={styles.container._box}></View>
</View>

Configuration

Styles = cssTree(GlobalStyle)(Middleware)(Style);
  • GlobalStyle is used to configure global theme styles.
  • Middleware supports multiple middleware functions.
  • Style is original style tree:
    • $ reference variable, and support the operation.
    • If use _ As a key prefix , it inherits all of the style properties of the parent.

Downloads/wk

2

GitHub Stars

25

LAST COMMIT

4yrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
1.0.3
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial