Example

├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── example.html ├── example.js ├── index.d.ts ├── index.js ├── index.js.flow ├── package.json ├── test-setup.js ├── test.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | dist 4 | .cache 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | git: 2 | depth: 1 3 | sudo: false 4 | language: node_js 5 | node_js: 6 | - '8' 7 | cache: 8 | yarn: true 9 | directories: 10 | - node_modules 11 | script: 12 | - yarn test 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2018-present James Kyle 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `@rehooks/input-value` 2 | 3 | > React hook for creating input values 4 | 5 | > **Note:** This is using the new [React Hooks API Proposal](https://reactjs.org/docs/hooks-intro.html) 6 | > which is subject to change until React 16.7 final. 7 | > 8 | > You'll need to install `react`, `react-dom`, etc at `^16.7.0-alpha.0` 9 | 10 | ## Install 11 | 12 | ```sh 13 | yarn add @rehooks/input-value 14 | ``` 15 | 16 | ## Usage 17 | 18 | ```js 19 | import useInputValue from '@rehooks/input-value'; 20 | 21 | function MyComponent() { 22 | let name = useInputValue('Jamie'); 23 | // name = { value: 'Jamie', onChange: [Function] } 24 | return ; 25 | } 26 | ``` 27 | -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Example 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /example.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | import useInputValue from './'; 4 | 5 | function App() { 6 | let name = useInputValue('Jamie'); 7 | return ; 8 | } 9 | 10 | render(, window.root); 11 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | interface InputValue { 2 | value: T, 3 | onChange: (event: React.ChangeEvent) => undefined, 4 | } 5 | 6 | export default function useInputValue(initialValue: T): InputValue; 7 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | let { useState, useCallback } = require('react'); 3 | 4 | function useInputValue(initialValue) { 5 | let [value, setValue] = useState(initialValue); 6 | let onChange = useCallback(function(event) { 7 | setValue(event.currentTarget.value); 8 | }, []); 9 | 10 | return { 11 | value, 12 | onChange, 13 | }; 14 | } 15 | 16 | module.exports = useInputValue; 17 | -------------------------------------------------------------------------------- /index.js.flow: -------------------------------------------------------------------------------- 1 | interface InputValue { 2 | value: T, 3 | onChange: (event: HTMLInputElement) => void, 4 | } 5 | 6 | export default function useInputValue(initialValue: T): InputValue; 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@rehooks/input-value", 3 | "version": "1.0.0", 4 | "description": "React hook for creating input values", 5 | "main": "index.js", 6 | "repository": "https://github.com/rehooks/input-value", 7 | "author": "Jamie Kyle ", 8 | "license": "MIT", 9 | "publishConfig": { 10 | "access": "public" 11 | }, 12 | "keywords": [ 13 | "react", 14 | "hooks", 15 | "form", 16 | "forms", 17 | "input", 18 | "value" 19 | ], 20 | "files": [ 21 | "index.*" 22 | ], 23 | "scripts": { 24 | "test": "ava test.js", 25 | "example": "parcel example.html" 26 | }, 27 | "dependencies": { 28 | "react": "^16.7.0-alpha.0" 29 | }, 30 | "devDependencies": { 31 | "ava": "^0.25.0", 32 | "browser-env": "^3.2.5", 33 | "parcel": "^1.10.3", 34 | "raf": "^3.4.0", 35 | "react-dom": "^16.7.0-alpha.0", 36 | "react-test-renderer": "^16.7.0-alpha.0" 37 | }, 38 | "ava": { 39 | "require": [ 40 | "./test-setup.js" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /test-setup.js: -------------------------------------------------------------------------------- 1 | require('raf/polyfill'); 2 | require('browser-env')(); 3 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | let test = require('ava'); 3 | let { createElement: h } = require('react'); 4 | let ReactTestRenderer = require('react-test-renderer'); 5 | let useInputValue = require('./'); 6 | 7 | function render(val) { 8 | return ReactTestRenderer.create(val); 9 | } 10 | 11 | test(t => { 12 | function Component() { 13 | let name = useInputValue('Jamie'); 14 | return h('input', name); 15 | } 16 | 17 | let input = render(h(Component)); 18 | 19 | t.is(input.toJSON().props.value, 'Jamie'); 20 | input.toJSON().props.onChange({ currentTarget: { value: 'Kyle' } }); 21 | t.is(input.toJSON().props.value, 'Kyle'); 22 | }); 23 | --------------------------------------------------------------------------------