dooli-styles

CSS decorator for react component

Usage no npm install needed!

<script type="module">
  import dooliStyles from 'https://cdn.skypack.dev/dooli-styles';
</script>

README

JavaScript libraly for react app

v0.0.3

install

npm i dooli-styles

Example:

import React from 'react';
import { createStyles } from "dooli-styles";

const styles = createStyles({
    button: {
        backgroundColor: '#232322',
        color: '#fff',
        borderRadius: '4px',
        border: 'none',
        padding: '9px 15px 10px',
        
        ':hover': {
            opacity: .6,
        }
    }
});

class Button extends React.Component {
    render() {
        const useStyles = styles();
        return (
            <button className={useStyles.button}>button</button>
        );
    }
}

Copy CSS properties:

const styles = createStyles({
    button: {
        backgroundColor: '#232322',
        color: '#fff',
        borderRadius: '4px',
        border: 'none',
        padding: '9px 15px 10px',
        
        ':hover': {
            opacity: .6,
        }
    },
    'button-login': {
        "@copy": "button",
        textTransform: "uppercase",
    },
    'button-sign': {
        ':hover': {
            "@copy": "button:hover"
        }
    }
});

Prefix

const styles = createStyles({
    button: {...}
}, {
    prefix: "MyPrefix"
})()

Use: styles.button => Output => MyPrefix__button