RC Value ·

Make React component switch between Controlled Component and Uncontrolled Component easily.

Installation

yarn add rc-value or npm install rc-value --save

Live Demos

You can find some demos at storybook.

Usage

Value

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

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

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