Package Exports

@cssfn/react-cssfn
@cssfn/react-cssfn/dist/react-cssfn.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@cssfn/react-cssfn) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-cssfn - Writes CSS in (similar) React Hooks

A lib for generating Style Sheet (css) with JavaScript function.
Similar to React Hooks but for generating css dynamically.

By underlying JavaScript language, the css can be easily exported/imported as a regular JavaScript module.

The generated css can be used in your <React Component> easily, something like this:

const useButtonSheet = createUseSheet(() => [
    // ....
]);

const awesomeButtonSheet = useButtonSheet();

return (
    <button className={awesomeButtonSheet.main}>
    </button>
);

Because your stylesheet is a javascript function, your css properties & values can be taken from another javascript objects/variables/functions:

layout({
    display: isVertical ? 'inline-flex' : 'flex', // conditional
    ...anotherStuff(), // using spread operator to define multiple properties
})

Preview

export const usesAwesomeButton = () => composition([
    imports([
        stripoutControl(), // clear browser's default styles
        
        usesButtonBase(), // imports css from a generic button
        
        // imports any stuff here...
    ]),
    layout({
        display       : 'flex',
        flexDirection : 'row',
        background    : 'pink',
        color         : 'darkred',
        
        // writes the css declaration similar to regular css
        
        ...children(['span', '.logo'], [ // target to <span> and class="logo"
            imports([
                // imports any stuff here...
            ]),
            layout({
                // writes the css declaration similar to regular css
            }),
        ]),
    }),
    variants([
        rule('.big', [
            layout({
                fontSize: 'xx-large',
                // ....
            }),
        ]),
        rule('.dark', [
            // ...
        ]),
    ]),
    states([
        rule([':disabled', '.disabled'], [
            // ....
        ]),
    ]),
]);

// attach the css to DOM:
export const useAwesomeButtonSheet = createUseSheet(() => [
    mainComposition([
        imports([
            usesAwesomeButton(),
        ]),
    ]),
    compositionOf('otherClass', [
        imports([
            // ...
        ]),
    ]),
]);

Then we can consume our generated css like this:

export default function AwesomeButton(props) {
    const btnSheet = useAwesomeButtonSheet();
    
    return (
        <>
            <button className={btnSheet.main}>Awesome!</button>
            <button className={btnSheet.otherClass}>Cool!</button>
        </>
    );
}

Features

Includes all Vanilla & ES6 JavaScript features.
Lazy execution (your function will be executed on demand).
Cached - your function only be executed once (or never if not needed).
IntelliSense supported - Our cssfn is written in TypeScript (superset of JavaScript).
CSS Variable Management - Never write variable name in plain string.
CSS Config Management - Shares a common setting to many components.

Installation

Using npm:

npm i @cssfn/react-cssfn

Support Us

If you feel our lib is useful for your projects,
please make a donation to avoid our project from extinction.

We always maintain our projects as long as we're still alive.

[Make a donation]