@_nu/react-button

No UI dependency Button of react

Usage no npm install needed!

<script type="module">
  import NuReactButton from 'https://cdn.skypack.dev/@_nu/react-button';
</script>

README

NuButton

npm package npm downloads github
npm package npm downloads github

没有 UI 依赖的按钮组件.

做了啥?

  • props 上有 href 时,会用 a 替换 button;
  • 默认为 button 添加 type="button";
  • 当元素标签不是 button 时会默认添加 role="button"

安装

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

二次封装

/* @/components/Button/index.js */
import NuButton from "@_nu/react-button";         // import
import "@_nu/css-button";                         // core style
import "@_nu/css-button/css/skins/bootstrap.css"; // skin of bootstrap
import './style.css';                             // custome style
const Button = React.forwardRef(function Button(props, ref) {
  return <NuButton classNames="nu_btn" ref={ref} {...props} />;
});

export default Button;

⚠️:注意这里 classNamesclassName的区别, 见底部 API

index.d.ts

import { ComponentProps } from '@_nu/react-button';
declare const _default: (props?: ComponentProps) => JSX.Element;
export default _default;

⚠️:二次封装之后,代码提示会丢失,需要额外添加 index.d.ts 维持代码提示!

使用

import Button from '@/components/Button';

// 这里省略了其它代码

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

会渲染成:

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

⚠️:这里是在定义了 classNames="nu_btn" 的状况之下

Api

属性 类型 默认值 功能
href string ' ' href for a
Component string | func | object 'button' tagName
className string '-' className
classNames string 'nu_btn' 会添加到 className 之前

⚠️:classNames 主要是用于在二次封装到时候,添加默认的 className

如何修改样式?

查看样式组件 @_nu/css-button