https://github.com/JedWatson/react-value

Adding Value to React
https://github.com/JedWatson/react-value

Last synced: 9 days ago
JSON representation

Adding Value to React

• Host: GitHub
• URL: https://github.com/JedWatson/react-value
• Owner: JedWatson
• License: mit
• Created: 2017-12-14T12:36:54.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-05-08T22:08:31.000Z (over 5 years ago)
• Last Synced: 2024-10-23T09:59:48.269Z (16 days ago)
• Language: JavaScript
• Size: 110 KB
• Stars: 91
• Watchers: 5
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-render-props - react-value
• awesome-react-render-props - react-value

README

        
# react-value

An easy easy way to wrap controlled components that provide `value` and `onChange` props with state.

Makes your components behave like React input components.

## Install

```

yarn add react-value

```

## Use

You can either use the `Value` component, which takes a `render` prop:

```jsx

import { Value } from 'react-value';

 null} // optional

  render={(value, onChange) => }

/>;

```

..or for repeated use, you can use the `withValue` HOC:

```jsx

import { withValue } from 'react-value';

const MyInputWithValue = withValue(MyInput);

;

```

### Custom Prop Names

If you want to use the HOC but the component you're wrapping uses different props for `value` and `onChange`, you can map them using the second options argument. For example, if the component expects `onValueUpdated` and `currentValue` props:

```jsx

import { withValue } from 'react-value';

const MyInputWithValue = withValue(MyInput, {

  onChangeProp: 'onValueUpdated',

  valueProp: 'currentValue',

});

;

```

# License

Copyright (c) 2018 Jed Watson. MIT Licensed.