# status-button

> simple customizable status buttons to change the UI

Latest version **0.0.5** (published 2019-01-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install status-button
pnpm add status-button
yarn add status-button
bun add status-button
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2019-01-17 |
| First published | 2019-01-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Rubaiyat Noman |
| Maintainers | rfnoman |
| Keywords | status button, slider button, toggle button, ios style toggle |

## Links

- npm: https://www.npmjs.com/package/status-button
- Repository: https://github.com/rfnoman/react-statusButton
- Issues: https://github.com/rfnoman/react-statusButton/issues
- npm.io page: https://npm.io/package/status-button

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 0.0.5 (latest) — 2019-01-17
- 0.0.4 — 2019-01-17
- 0.0.3 — 2019-01-17
- 0.0.2 — 2019-01-17
- 0.0.1 — 2019-01-16

## README

# Status Button
simple customizable status buttons to change the UI
##Installation 
```
npm install status-button --save
```
##How to use
Very simple here's a code snippet of StatusButton andt StatusButtonToggle with default props
```
import { StatusButton, StatusButtonToggle } from 'status-button';
class App extends React.Component{
    constructor(props)
    {
        super(props)
        this.state={
            status:"something",
            flag:true
        }
    }
    render(){
        return(
                <div style={{height:"100%", width:"100%", marginTop:"120px"}} align="middle">
                    <div>
                        <StatusButton                           
                            buttonClick1={()=>{this.setState({status:"hello"})}}
                            buttonClick2={()=>{this.setState({status:"world"})}}                                                       
                        />
                    </div>
                    <div style={{color:"red"}}>{this.state.status}</div>
                    <StatusButtonToggle
                        onclick={()=>{this.setState((prevState)=>({flag:!prevState.flag}))}}
                    />
                </div>
        )
    }
}
```
###All the props of StatusButton
- `status1` : left button name | default: "O"
- `status2` : right button name | default: "I"
- `buttonClick1` : pass your left button function here
- `buttonClick2` : pass your right button function here
- `size` : give your desired px size (for example size=150) | default: 80
- `backgroundColor` : set the inactive button color | default: "lightfgrey"
- `activeColor` : set active button color | default: black
###All the props of StatusButton
- `status1` : left button name | default: "O"
- `status2` : right button name | default: "I"
- `onclick` : pass your left button function here
- `size` : give your desired px size (for example size=150) | default: 80
- `backgroundColor` : set the inactive button color | default: "lightfgrey"
- `activeColor` : set active button color | default: black

---
_Source: https://npm.io/package/status-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._