nean
TypeScript icon, indicating that this package has built-in type declarations

3.0.1 • Public • Published

nean

npm version types size coverage vulnerabilities dependencies License

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

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

Readme

Keywords

none

Package Sidebar

Install

npm i nean

Weekly Downloads

9

Version

3.0.1

License

MIT

Unpacked Size

14.1 kB

Total Files

5

Last publish

Collaborators

  • sovrin