js framework for neat and lean components

Installation

$ npm i nean

Usage

import react, {Fragment} from 'react';
import nean from 'nean';

const Button = nean()({
    as: 'button',
    className: 'btn',
    style: ({rounded, primary}) => ({
        'btn--rounded': rounded,
        'btn--primary': primary,
    }),
    extend: ({md}) => ({
        'data-size': md,
    }),
    render: ({children, prefix}) => (
        <Fragment>
            {prefix}{children}
        </Fragment>
    ),
});

<Button
    prefix="foo"
    md={2}
    rounded
    primary
>
    bar
</Button>

// ===

<button 
    className="btn btn--rounded btn--primary" 
    data-size="2"
>
    foobar
</button>

API

• nean()
• interceptHook()
• createHook()

Library

nean(formatter: Formatter)

Factory

| | type | default | description | |:------------|:----------|:----------------------|:-----------------------------------------------------------| | as | string? | | type of element e.g. span, div, button | | className | string? | | base className of the element | | style | Function? | props | provides an object with all consumed props for translation | | extend | Function? | props | allows extending or aliasing of props | | render | Function? | {children}, [hooks] | overwrite of default render function, array of hooks |

as

Pass type button to create a plain button component.

import nean from 'nean';

const Button = nean()({
    as: 'button',
});

className

By adding className, the component receives a base className.

import nean from 'nean';

const Button = nean()({
    as: 'button',
    className: 'btn',
});

style(props)

To bind props to css classNames of the chosen framework, return an object with the new classNames with props as values. style recursively evaluates every property/value by its truthiness and keeps its key.

import nean from 'nean';

const Button = nean()({
    as: 'button',
    style: (({primary}) => ({
        'btn-primary': primary
    })),
});

extend(props)

Sometimes, css frameworks have components which rely on data attributes. These can be set via extend. This function allows the extension of the original props.

import nean from 'nean';

const Button = nean()({
    as: 'button',
    extend: (({badges}) => ({
        'data-badges': badges
    })),
});

render(props)

It's possible to overwrite the render output via the render function. This allows to wrap your components children with other components.

import React from 'react';
import nean from 'nean';

const Link = nean()({
    as: 'a',
    render: (({children}) => (
        <Button>
            {children}
        </Button>
    )),
});

interceptHook(use[, destructive = false])

nean components accept custom tailored hooks which can be addressed individually later on render.

• use (array of hooks)
• optional destructive (shift used hook from array of hooks)

createHook(name, hook)

hooks can extend a component via provided props.

• name (name of the hook)
• hook (hook function)

import React from 'react';
import nean, {interceptHook, createHook} from 'nean';

// definition
const Button = nean()({
    render: ({children, use}) => {
        const icon = interceptHook(use)('icon');

        return (
            <Fragment>
                {icon('left')} {children} {icon('right')}
            </Fragment>
        );
    },
});

const useIcon = (type, side = 'left') => createHook('icon', (check) => {
    if (check !== side) {
        return null;
    }

    return (
        <Icon type={type}/>
    );
});

// usage
const App = () => (
    <Button use={[
        useIcon('hamburger', 'right')
    ]}>
        hello world
    </Button>
)

Licence

MIT License, see LICENSE