@_nu/cli/template/react/README.md

🛠️ Standard Tooling for nu-system component development

<% var componentNameC=componentName.charAt(0).toUpperCase() + componentName.slice(1);  %>
# @\_nu/react-<%= componentName %>

| npm package| npm downloads| jsdelivr |  github |
| --------------- | ------------------------------ | ------ | ----------------------- |
| [![npm package][npm-badge]][npm-url] | [![npm downloads][npm-downloads]][npm-url] | [![jsdelivr][jsdelivr-badge]][jsdelivr-url] | [![github][git-badge]][git-url] |

[npm-badge]: https://img.shields.io/npm/v/@_nu/react-<%= componentName %>.svg
[npm-url]: https://www.npmjs.org/package/@_nu/react-<%= componentName %>
[npm-downloads]: https://img.shields.io/npm/dw/@_nu/react-<%= componentName %>
[git-url]: https://github.com/nu-system/react-<%= componentName %>
[git-badge]: https://img.shields.io/github/stars/nu-system/react-<%= componentName %>.svg?style=social
[jsdelivr-badge]: https://data.jsdelivr.com/v1/package/npm/@_nu/react-<%= componentName %>/badge
[jsdelivr-url]: https://www.jsdelivr.com/package/npm/@_nu/react-<%= componentName %>

English | [简体中文](./lang/zh.md)

## Install

```
yarn add @_nu/react-<%= componentName %> @_nu/css-<%= componentName %>
```

- [@\_nu/react-<%= componentName %>](https://nu-system.github.io/react/<%= componentName %>/): Login only
- [@\_nu/css-<%= componentName %>](https://nu-system.github.io/css/<%= componentName %>/): UI Just

### Custom

```JSX
/* @components/<%= componentNameC %>/index.js */
import <%= componentNameC %> from "@_nu/react-<%= componentName %>";
// core style
import "@_nu/css-<%= componentName %>";
// skin of default
import "@_nu/css-<%= componentName %>/css/skins/default.css";
// custome style
// import './style.css';

// base className of <%= componentNameC %>
<%= componentNameC %>.defaultProps.classNameBase = "";

export default <%= componentNameC %>;
```

### Use

```JSX
import <%= componentNameC %> from "./components/<%= componentNameC %>";

const Page=()=>{
    return (
     <div>
        <<%= componentNameC %>>Hello world!</<%= componentNameC %>>
     </div>
    );
};

export default Page;
```

## API

| Prop             |               type               | Default  |         Function          |
| :--------------- | :------------------------------: | :------: | :-----------------------: |
| children         |       string &#124; Array        | '&nbsp;' |         children          |
| className        |       string &#124; Array        | '&nbsp;' |         className         |
| classNameDefault |       string &#124; Array        | '&nbsp;' |     default className     |

## More

- [nu-system](https://nu-system.github.io/)
- [@\_nu/css-<%= componentName %>](https://nu-system.github.io/css/<%= componentName %>/)
- [@\_nu/react-<%= componentName %>](https://nu-system.github.io/react/<%= componentName %>/)