init commit

rehooks · Oct 25, 2018 · 69f5006 · 69f5006
commit 69f5006
Show file tree

Hide file tree

Showing 13 changed files with 6,700 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+*.log
+dist
+.cache
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,12 @@
+git:
+  depth: 1
+sudo: false
+language: node_js
+node_js:
+  - '8'
+cache:
+  yarn: true
+  directories:
+    - node_modules
+script:
+  - yarn test
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,19 @@
+Copyright (c) 2018-present James Kyle <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,26 @@
+# `@rehooks/input-value`
+
+> React hook for creating input values
+
+> **Note:** This is using the new [React Hooks API Proposal](https://reactjs.org/docs/hooks-intro.html)
+> which is subject to change until React 16.7 final.
+>
+> You'll need to install `react`, `react-dom`, etc at `^16.7.0-alpha.0`
+
+## Install
+
+```sh
+yarn add @rehooks/input-value
+```
+
+## Usage
+
+```js
+import useInputValue from '@rehooks/input-value';
+
+function MyComponent() {
+  let name = useInputValue('Jamie');
+  // name = { value: 'Jamie', onChange: [Function] }
+  return <input {...name}/>;
+}
+```
diff --git a/example.html b/example.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="./example.js"></script>
+  </body>
+</html>
diff --git a/example.js b/example.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from 'react-dom';
+import useInputValue from './';
+
+function App() {
+  let name = useInputValue('Jamie');
+  return <input {...name}/>;
+}
+
+render(<App />, window.root);
diff --git a/index.d.ts b/index.d.ts
@@ -0,0 +1,6 @@
+interface InputValue<T> {
+  value: T,
+  onChange: (event: HTMLInputElement) => undefined,
+}
+
+export default function useInputValue<T>(initialValue: T): InputValue<T>;
diff --git a/index.js b/index.js
@@ -0,0 +1,17 @@
+'use strict';
+let { useState } = require('react');
+
+function useInputValue(initialValue, validate) {
+  let [value, setValue] = useState(initialValue);
+
+  function onChange(event) {
+    setValue(event.currentTarget.value);
+  }
+
+  return {
+    value,
+    onChange,
+  };
+}
+
+module.exports = useInputValue;
diff --git a/index.js.flow b/index.js.flow
@@ -0,0 +1,6 @@
+interface InputValue<T> {
+  value: T,
+  onChange: (event: HTMLInputElement) => void,
+}
+
+export default function useInputValue<T>(initialValue: T): InputValue<T>;
diff --git a/package.json b/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@rehooks/input-value",
+  "version": "0.0.0",
+  "description": "React hook for creating input values",
+  "main": "index.js",
+  "repository": "https://github.com/rehooks/input-value",
+  "author": "Jamie Kyle <[email protected]>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "hooks",
+    "form",
+    "forms",
+    "input",
+    "value"
+  ],
+  "files": [
+    "index.*"
+  ],
+  "scripts": {
+    "test": "ava test.js",
+    "example": "parcel example.html"
+  },
+  "dependencies": {
+    "react": "^16.7.0-alpha.0"
+  },
+  "devDependencies": {
+    "ava": "^0.25.0",
+    "browser-env": "^3.2.5",
+    "parcel": "^1.10.3",
+    "raf": "^3.4.0",
+    "react-dom": "^16.7.0-alpha.0",
+    "react-test-renderer": "^16.7.0-alpha.0"
+  },
+  "ava": {
+    "require": [
+      "./test-setup.js"
+    ]
+  }
+}
diff --git a/test-setup.js b/test-setup.js
@@ -0,0 +1,2 @@
+require('raf/polyfill');
+require('browser-env')();
diff --git a/test.js b/test.js
@@ -0,0 +1,22 @@
+'use strict';
+let test = require('ava');
+let { createElement: h } = require('react');
+let ReactTestRenderer = require('react-test-renderer');
+let useInputValue = require('./');
+
+function render(val) {
+  return ReactTestRenderer.create(val);
+}
+
+test(t => {
+  function Component() {
+    let name = useInputValue('Jamie');
+    return h('input', name);
+  }
+
+  let input = render(h(Component));
+
+  t.is(input.toJSON().props.value, 'Jamie');
+  input.toJSON().props.onChange({ currentTarget: { value: 'Kyle' } });
+  t.is(input.toJSON().props.value, 'Kyle');
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		require('raf/polyfill');
		require('browser-env')();