# rc-value

> Make React component switch between [`Controlled Component`](https://reactjs.org/docs/forms.html#controlled-components) and [`Uncontrolled Component`](https://reactjs.org/docs/uncontrolled-components.html) easily.

Latest version **0.0.3** (published 2019-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install rc-value
pnpm add rc-value
yarn add rc-value
bun add rc-value
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2019-04-24 |
| First published | 2019-04-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 552.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | beizhedenglong |

## Links

- npm: https://www.npmjs.com/package/rc-value
- npm.io page: https://npm.io/package/rc-value

## Recent versions

- 0.0.3 (latest) — 2019-04-24
- 0.0.2 — 2019-04-17

## README

# RC Value · [![Build Status](https://travis-ci.org/beizhedenglong/rc-value.svg?branch=master)](https://travis-ci.org/beizhedenglong/rc-value) [![Coverage Status](https://coveralls.io/repos/github/beizhedenglong/rc-value/badge.svg?branch=master)](https://coveralls.io/github/beizhedenglong/rc-value?branch=master)
Make React component switch between [`Controlled Component`](https://reactjs.org/docs/forms.html#controlled-components) and [`Uncontrolled Component`](https://reactjs.org/docs/uncontrolled-components.html) easily.

## Installation
`yarn add rc-value` or `npm install rc-value --save`

## Live Demos
You can find some demos at [`storybook`](https://beizhedenglong.github.io/rc-value/).

## Usage

### `Value`
```jsx
import { Value } from 'rc-value'

const Switch = props => (
  <Value {...props}>
    {({ value, onChange }) => (
      <button
        onClick={() => { onChange(prev => !prev) }}
      >
        {String(value)}
      </button>
    )}
  </Value>
)

<Switch defaultValue={false} onChange={console.log} /> // This becomes an Uncontrolled Switch
<Switch value={false} onChange={console.log}/> // This becomes a Controlled Switch
```

### `useValue`
```jsx
import { useValue } from 'rc-value'

const Switch = (props) => {
  const { value, onChange } = useValue(props)
  return <button onClick={() => onChange(prev => !prev)}>{String(value)}</button>
}

<Switch defaultValue={false} onChange={console.log} /> // This becomes an Uncontrolled Switch
<Switch value={false} onChange={console.log}/> // This becomes a Controlled Switch
```

### `withValue`

```jsx
import { withValue } from 'rc-value'

const Switch = withValue(
  ({ value, onChange }) => (
    <button onClick={() => onChange(prev => !prev)}>{String(value)}</button>
  ),
)

<Switch defaultValue={false} onChange={console.log} /> // This becomes an Uncontrolled Switch
<Switch value={false} onChange={console.log}/> // This becomes a Controlled Switch
```

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