Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

@_nu/react-switch

Package Overview
Dependencies
Maintainers
2
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@_nu/react-switch - npm Package Compare versions

Comparing version
0.1.2
 to
0.1.3
+11
-0
CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log

## [0.1.3](https://github.com/nu-system/react/compare/@_nu/react-switch@0.1.2...@_nu/react-switch@0.1.3) (2020-07-12)
### Bug Fixes
* 添加依赖 ([e53be21](https://github.com/nu-system/react/commit/e53be210630e13e34ca69d097614d92121dcff54))
## [0.1.2](https://github.com/nu-system/react/compare/@_nu/react-switch@0.1.1...@_nu/react-switch@0.1.2) (2020-07-12)

@@ -8,0 +19,0 @@ 

+3
-2
package.json
{
"name": "@_nu/react-switch",
"version": "0.1.2",
"version": "0.1.3",
"description": "No UI dependency switch of react",

@@ -24,2 +24,3 @@ "main": "lib/index.js",

"dependencies": {
"classnames": "^2.2.6",
"prop-types": "^15.7.2"

@@ -48,3 +49,3 @@ },

},
"gitHead": "b56478e077ed2271fd1f2767074c372663d12ae2"
"gitHead": "b50e96cc7c84f5fc840a1aa73dd1fca8c9ac1fb7"
}
+4
-79
README.md

@@ -17,87 +17,12 @@ # Switch

- When got href tagName will replace by `a`;
- When tagName is `button` will got `type="button"` as default;
- When children is `<string>` and title will be `children` as default;
- When tagName is not `button` will got `role="button"`
## 安装
## Install
```
yarn add @_nu/react-button @_nu/css-button
yarn add @_nu/react-switch
```
- [@\_nu/react-button](https://nu-system.github.io/react/button/): Login only
- [@\_nu/css-button](https://nu-system.github.io/css/button/): UI Just
### 使用
### Custom
```JSX
/* @components/Button/index.js */
import "@_nu/css-button"; // core style
import "@_nu/css-button/css/skins/bootstrap.css"; // skin of bootstrap
import './style.css'; // custome style
import NuButton from "@_nu/react-button"; // import
// Add default class
NuButton.defaultProps.onBeforeReturn = ({className='', props})=> ({
className:`nu_btn ${className}`
...props
});
export default NuButton;
<NuSwitch />
```
### Use
```JSX
<Button className="_fill _primay">Button</Button>
<Button className="_fill _primay" href="/nu-button">Link Button</Button>
<Button component="strong" className="_fill _primay">Button</Button>
```
## Api
| Prop | type | Default | Function |
| :-------- | :------------------------------: | :------: | :----------: |
| href | string | '&nbsp;' | href for `a` |
| Component | string &#124; func &#124; object | 'button' | tagName |
```JSX
<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>
```
=>
```HTML
<button class="nu_btn _fill" type="button" title="hello">hello</button>
<strong class="nu_btn _fill" role="button" title="hello">hello</strong>
<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 _fill _primary" type="button" title="hello">hello</button>
<a class="nu_btn _fill _primary" role="button" href="." title="hello">hello</a>
```
| defaultProps | type | Default | Function |
| :------------- | :------: | :---------------: | :---------------------------: |
| onBeforeReturn | function | `(props)=> props` | custom props on before return |
## Custom style？
Go to [@\_nu/css-button](https://nu-system.github.io/css/button/)
## test
```
// How to start
npm test
```
```
// generate coverage report
npm run test:coverage
```