@_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

Button.defaultProps.classNameBase = "_fill";  // base className of button

export default Button;

Use

import Button from "./components/Button";

const Page=()=>{
    return (
     <div>
        <Button>Button</Button>
        <Button href="/nu-button">Button</Button>
     </div>
    );
};

export default Page;

Struct

<Component>
    <ComponentSub>{children}</ComponentSub>
</Component>

Api

Prop	type	Default	Function
children	string | Array	' '	children
className	string | Array	' '	className
classNameDefault	string | Array	'_fill'	default className
href	string	' '	href for a
disabled	boolean	false	disabled status of button
Component	string | func | object	'button'	wrapper
ComponentSub	string | func | object	'span'	container

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

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

classNames

<Button className="_primary _fill _ghost _primary">hello</Button>
<Button className={['_primary','_fill','_ghost','_primary','','',null]}>hello</Button>

<button class="nu_btn _primary _ghost" type="button"><span>hello</span></button>

• duplicate class will remove;
• _fill,_ghost,_link show on className. only the last one will be render;
• empty will be ignore;

Use with Link？

import { Link } from "@reach/router";
import Button from "@_nu/react-button";
import "@_nu/css-button";
import "./style.css";

// Custom
Button.defaultProps.component = Link;

export default Button;

Custom default className?

Button.defaultProps.classNameDefault = "_fill _capsule";

// or

Button.defaultProps.classNameDefault = ["_fill", "_capsule"];

Custom style？

Go to @_nu/css-button

test

// How to start
npm test

// generate coverage report
npm run test:coverage