@_nu/react-button

Button

No UI dependency button of react.

English | 简体中文

Install

yarn add @_nu/react-button @_nu/css-button

• @_nu/react-button: Login only
• @_nu/css-button: UI Just

Custom

/* @components/Button/index.js */
import Button from "@_nu/react-button";
import "@_nu/css-button";     // core style
import "@_nu/css-button/css/skins/bootstrap.css"; // skin of bootstrap
import './style.css'; // custome style

export default Button;

Use

import React, { useState } from 'react';
import Button, { ButtonClassProvider } from '../Button';

const Page=()=>{
    const [buttonThemeClass, setButtonThemeClass] = useState('theme_class1');
    const onThemeChange = e => {
        setButtonThemeClass(e.currentTarget.value);
    };
    return (
        <ButtonClassProvider value={buttonThemeClass}>
            <div>
                <select onChange={onThemeChange}>
                    <option value="theme_class1">theme1</option>
                    <option value="theme_class2">theme2</option>
                </select>
                <Button className="nu_btn">Button</Button>
                <Button className="nu_btn" href="/nu-button">Button</Button>
            </div>
        </ButtonClassProvider>
    );
};

export default Page;

Api

Prop	type	Default	Function
children	string | Array	' '	children
className	string | Array	' '	className
href	string	' '	href for a
disabled	boolean	false	disabled status of button
Component	string | func | object	'button'	wrapper

<Button className="nu_btn _fill">hello</Button>
<Button className="nu_btn _fill"><strong>hello</strong></Button>
<Button className="nu_btn _fill" disabled>hello</Button>
<Button className="nu_btn _fill _primary">hello</Button>
<Button className="nu_btn _fill _primary" href="." title="hello">hello</Button>

=>

<button class="nu_btn _fill" type="button" title="hello">hello</button>
<button class="nu_btn _fill" type="button"><strong>hello</strong></button>
<button class="nu_btn _fill" type="button" disabled title="hello">hello</button>
<button class="nu_btn _primary _fill" type="button" title="hello">hello</button>
<button class="nu_btn _fill _primary" type="button" title="hello">hello</button>
<a class="nu_btn _fill _primary" href="." title="hello">hello</a>

Custom style？

Go to @_nu/css-button

test

// How to start
npm test

// generate coverage report
npm run test:coverage