# @todys/react-slide-toggle

> In react, display the matched elements in the sliding action. A component that works like jQuery slidedown, slideUp method in react.

Latest version **2.0.7** (published 2021-10-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @todys/react-slide-toggle
pnpm add @todys/react-slide-toggle
yarn add @todys/react-slide-toggle
bun add @todys/react-slide-toggle
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.7 |
| Published | 2021-10-04 |
| First published | 2021-07-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | jo young saeng |
| Maintainers | todys |
| Keywords | react, slide, collapsible, slideDown, slideUp, slideToggle, react-slide, react-slideToggle, react-slideUp, react-slideDown, typescript |

## Links

- npm: https://www.npmjs.com/package/@todys/react-slide-toggle
- Homepage: https://github.com/whdudtod1273/react-slideToggle.git
- Issues: https://github.com/whdudtod1273/react-slideToggle.git
- npm.io page: https://npm.io/package/@todys/react-slide-toggle

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.7 (latest) — 2021-10-04
- 2.0.6 — 2021-10-04
- 2.0.5 — 2021-10-04
- 2.0.4 — 2021-10-04
- 2.0.3 — 2021-10-04
- 2.0.2 — 2021-10-04
- 2.0.1 — 2021-10-04
- 1.0.1 — 2021-07-15
- 1.0.0 — 2021-07-15

## README

# @todys/react-slideToggle

In react, display the matched elements in the sliding action.

## Installation

```
npm i @todys/react-slide-toggle
or
yarn add @todys/react-slide-toggle
```

## Usage

```javascript
import { SlideToggle } from '@todys/react-slide-toggle'

const [toggleState, setToggleState] = useState(false);
const clickEvent = () => {
  setToggleState(prev => !prev)
}

ReactDOM.render(
  <div>
    <button type="button" onClick={clickEvent}>
      click!
    </button>
    <SlideToggle 
      state={toggleState} 
      duration={0.5}
    >
      {/* Add the elements that will be slid here. */}
    </SlideToggle>
  </div>
)
```
example code link
<https://github.com/whdudtod1273/react-slideToggle/blob/main/src/example/index.js>

## Props

| params | value | defaultValue | description |
|--------|-------|--------------|-------------|
|state|Boolean|false|Boolean value that determines whether elements are represented within the slideToggle component|
|duration|Number|0.5|A number determining how long the animation will run.|

---
_Source: https://npm.io/package/@todys/react-slide-toggle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._