├── .babelrc ├── .eslintrc ├── .gitattributes ├── .github ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md └── ISSUE_TEMPLATE.md ├── .gitignore ├── .npmignore ├── .travis.yml ├── .watchmanconfig ├── LICENSE ├── README.md ├── bin └── test.sh ├── example ├── README.md ├── index.html ├── index.js ├── server.js └── webpack.config.js ├── package.json ├── src ├── __snapshots__ │ ├── field.spec.js.snap │ ├── form.spec.js.snap │ ├── input.spec.js.snap │ ├── label.spec.js.snap │ └── submit.spec.js.snap ├── field.js ├── field.spec.js ├── form.js ├── form.spec.js ├── input.js ├── input.spec.js ├── label.js ├── label.spec.js ├── submit.js └── submit.spec.js ├── test ├── setup.js └── types.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "stage-0", 5 | "react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-airbnb", 3 | "parser": "babel-eslint", 4 | "env": { 5 | "browser": true, 6 | "node": true, 7 | "es6": true, 8 | "mocha": true 9 | }, 10 | "ecmaFeatures": { 11 | "jsx": true, 12 | "modules": true 13 | }, 14 | "rules": { 15 | "comma-dangle": [2, "never"], 16 | "indent": [2, 2], 17 | "consistent-return": 0, 18 | "react/jsx-indent-props": [2, 2], 19 | "react/jsx-uses-react": 2, 20 | "react/jsx-uses-vars": 2, 21 | "react/jsx-boolean-value": 0, 22 | "react/react-in-jsx-scope": 0, 23 | "react/jsx-filename-extension": 0, 24 | "react/prop-types": 0, 25 | "react/no-unused-prop-types": 0, 26 | "padded-blocks": 0, 27 | "block-scoped-var": 0, 28 | "jsx-a11y/anchor-has-content": 0, 29 | "jsx-a11y/no-static-element-interactions": 0 30 | }, 31 | "plugins": [ 32 | "react", 33 | "jsx-a11y" 34 | ], 35 | "globals": { 36 | "expect": true, 37 | "spy": true, 38 | "shallow": true, 39 | "mount": true, 40 | "TYPES" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | ## github.com/alexkaratarakis/gitattributes/blob/master/Web.gitattributes 2 | ## Thanks to Alexander Karatarakis for the original file. 3 | 4 | ## Auto Detect 5 | ## Handle line endings automatically for files detected as 6 | ## text and leave all files detected as binary untouched. 7 | ## This will handle all files NOT defined below. 8 | * text=auto 9 | 10 | ## Misc. 11 | *.bat text eol=crlf 12 | *.coffee text 13 | *.css text 14 | *.htm text 15 | *.html text 16 | *.inc text 17 | *.ini text 18 | *.js text 19 | *.json text 20 | *.jsx text 21 | *.less text 22 | *.od text 23 | *.onlydata text 24 | *.php text 25 | *.pl text 26 | *.py text 27 | *.rb text 28 | *.sass text 29 | *.scm text 30 | *.scss text 31 | *.sh text eol=lf 32 | *.sql text 33 | *.styl text 34 | *.tag text 35 | *.ts text 36 | *.tsx text 37 | *.xml text 38 | *.xhtml text 39 | 40 | ## Documentation 41 | *.markdown text 42 | *.md text 43 | *.mdwn text 44 | *.mdown text 45 | *.mkd text 46 | *.mkdn text 47 | *.mdtxt text 48 | *.mdtext text 49 | *.txt text 50 | license text 51 | LICENSE text 52 | 53 | ## Templates 54 | *.dot text 55 | *.ejs text 56 | *.haml text 57 | *.handlebars text 58 | *.hbs text 59 | *.hbt text 60 | *.jade text 61 | *.latte text 62 | *.mustache text 63 | *.njk text 64 | *.phtml text 65 | *.tmpl text 66 | *.tpl text 67 | *.twig text 68 | 69 | ## Configs 70 | .babelrc text 71 | .eslintrc text 72 | .gitattributes text 73 | .gitconfig text 74 | .gitignore text 75 | .watchmanconfig text 76 | *.npmignore text 77 | Makefile text 78 | makefile text 79 | *yml text 80 | 81 | ## Images 82 | *.ai binary 83 | *.bmp binary 84 | *.eps binary 85 | *.gif binary 86 | *.ico binary 87 | *.jng binary 88 | *.jp2 binary 89 | *.jpg binary 90 | *.jpeg binary 91 | *.jpx binary 92 | *.jxr binary 93 | *.pdf binary 94 | *.png binary 95 | *.psb binary 96 | *.psd binary 97 | *.svg text 98 | *.svgz binary 99 | *.tif binary 100 | *.tiff binary 101 | *.wbmp binary 102 | *.webp binary 103 | 104 | ## Audio 105 | *.kar binary 106 | *.m4a binary 107 | *.mid binary 108 | *.midi binary 109 | *.mp3 binary 110 | *.ogg binary 111 | *.ra binary 112 | 113 | ## Video 114 | *.3gpp binary 115 | *.3gp binary 116 | *.as binary 117 | *.asf binary 118 | *.asx binary 119 | *.fla binary 120 | *.flv binary 121 | *.m4v binary 122 | *.mng binary 123 | *.mov binary 124 | *.mp4 binary 125 | *.mpeg binary 126 | *.mpg binary 127 | *.swc binary 128 | *.swf binary 129 | *.webm binary 130 | 131 | ## Archives 132 | *.7z binary 133 | *.gz binary 134 | *.rar binary 135 | *.tar binary 136 | *.zip binary 137 | 138 | ## Fonts 139 | *.ttf binary 140 | *.eot binary 141 | *.otf binary 142 | *.woff binary 143 | *.woff2 binary 144 | 145 | ## Executables 146 | *.exe binary 147 | *.pyc binary 148 | -------------------------------------------------------------------------------- /.github/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting Patrick Burtchaell, the project owner, at [patrick@pburtchaell.com](mailto:patrick@pburtchaell.com). The project owner will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]. 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | [![Known Vulnerabilities](https://snyk.io/test/npm/react-input/badge.svg)](https://snyk.io/test/npm/react-input) [![Dependency Status](https://david-dm.org/pburtchaell/redux-promise-middleware.svg)](https://david-dm.org/pburtchaell/redux-promise-middleware) [![Build Status](https://travis-ci.org/pburtchaell/react-input.svg)](https://travis-ci.org/pburtchaell/react-input) [![Coverage Status](https://coveralls.io/repos/pburtchaell/react-input/badge.svg?branch=master&service=github)](https://coveralls.io/github/pburtchaell/react-input?branch=master) 4 | 5 | **It is imperative that pull requests include tests and documentation and issues follow guidelines.** Please be familar with the [GitHub Community Guidelines](https://help.github.com/articles/github-community-guidelines/) before contributing to this project. If you are new to open source, check out this 38 minute course on [how to contribute to open source on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github). It's free! :smile: 6 | 7 | ## Getting Started 8 | 9 | 1. Clone the repository 10 | 2. Install dependencies: `npm install`, or, if you use Yarn: `yarn` 11 | 3. Run tests: `npm test` 12 | 4. Run example: `npm start` 13 | 14 | ## Need Help? :raising_hand: 15 | 16 | It's okay to ask for help via a GitHub issue, but first read the ["Filing an Issue"](#filing-an-issue) guide and consider: 17 | 18 | * Is my issue specific to this project? 19 | * Is [StackOverflow](http://stackoverflow.com/questions/ask) a better place to ask for help? If yes, use the **#react** tags. 20 | * Can I reduce the code example to the bare minimum required to explain what I need help with? 21 | * Can I create a [JSBin](https://jsbin.com/?html,output) for the code example? 22 | * Can I explain what the expected behavior is? 23 | * Can I explain what the actual beavior is? 24 | 25 | ## Found a Bug? 26 | 27 | **The best bug report is a failing test in the repository as a pull request.** Please refer to the ["Filing an Issue"](#filing-an-issue) guide and include: 28 | 29 | * Version number 30 | * Steps to reproduce 31 | * Expected behavior 32 | * Actual behavior 33 | 34 | ## Have a Feature Request? 35 | 36 | If you have a feature request, provide commentary and code samples on what this feature means for you. 37 | 38 | * What do you perceive it will enable you to do? 39 | * What potential bugs will be avoided? 40 | * What edge cases will it support? 41 | * Is it a [micro-optimization](http://stackoverflow.com/questions/tagged/micro-optimization). If yes, is it a valuable? 42 | 43 | Please refer to the ["Filing an Issue"](#filing-an-issue) guide. 44 | 45 | ## Filing an Issue 46 | 47 | 1. Check if a related open issue exists by using search. See the GitHub guide to [searching issues](https://help.github.com/articles/searching-issues/). 48 | 2. If a related issue does *not* exist, open an issue. 49 | 3. If a related issue does exist, contribute to the conversation there. 50 | 51 | Before you create an issue, consider: 52 | 53 | * Did you describe the problem you are encountering? 54 | * Did you describe the expected behavior? 55 | * Did you provide a formatted code example? See the GitHub guide on [how to format code with Markdown](help.github.com/categories/writing-on-github/). 56 | * Did you include a relevant label? 57 | 58 | If you include all of the above, it is easier to understand you. We respond quicker to formatted, comprehensive issues. 59 | 60 | Please keep in mind that issues should *contribute* to the community. The primary function of issues should be for bugs and feature requests. If you open an issue asking for help, that's fine. However, if you do not provide context or code examples, the issue will be closed and you will be redirected to this document. 61 | 62 | ## Making a Contribution 63 | 64 | 1. Check [the issues](https://github.com/pburtchaell/react-input/issues) for "help wanted" labels. 65 | 2. Check if there is a pull request already open for this issue. If there is, please do not duplicate efforts. 66 | 3. Commit the changes required to resolve the issue. Git commit messages [should be written in the imperative](http://chris.beams.io/posts/git-commit/). A pre-commit hook will run tests and lint code. If needed, you can force a commit with `--no-verify`. 67 | 4. If needed, add one or more unit test(s). **For new features and bug fixes, a unit test is required.** Follow the [red/green/refactor process](https://en.wikipedia.org/wiki/Test-driven_development#Development_style). 68 | 5. Run tests and linter: `npm test`. Code is linted using ES Lint. Rules are located in `.eslintrc`. You must maintain the existing code style. **Tests must pass before the PR is merged.** 69 | 6. Document new features and/or API changes. 70 | 71 | If you add a new dependency (for the package or development), you will need to use [Yarn](https://yarnpkg.com/) to update the `yarn.lock` file with the dependency version. By installing depdencies faster than npm, Yarn drastically decreases the time it takes to run builds on continuous integration. 72 | 73 | ## File organization 74 | 75 | All code, including tests, is written in next-generation JavaScript and transpiled using Babel. Source files are located in `src` and transpiled to `dist`, which is gitignored. Tests should be placed in a `test` directory. 76 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | :wave: Hi! If you switch to "Preview" mode (using the button above), this is easier to read and you can click on links. This template exists to help you create an issue that is both valuable to you and to the GitHub community. 2 | 3 | :point_right: **Found a bug?** [Read this](https://github.com/pburtchaell/react-input/blob/master/.github/CONTRIBUTING.md#found-a-bug). 4 | :point_right: **Have a feature request?** [Read this](https://github.com/pburtchaell/react-input/blob/master/.github/CONTRIBUTING.md#have-a-feature-request). 5 | :point_right: **Need help?** [Read this](https://github.com/pburtchaell/react-input/blob/master/.github/CONTRIBUTING.md#need-help). 6 | 7 | If you delete this template and do not provide the information we need to resolve your issue, *your issue will be closed* and you will be redirected to the contributing guide. :skull: 8 | 9 | --- 10 | 11 | For help, use this template: 12 | 13 | ## Version Number 14 | 15 | ## Code Example 16 | 17 | ## Expected Behavior 18 | 19 | ## Actual Behavior 20 | 21 | --- 22 | 23 | For bugs, use this template: 24 | 25 | ## Version Number 26 | 27 | ## Test Case 28 | 29 | ## Steps to Reproduce 30 | 31 | ## Expected Behavior 32 | 33 | ## Actual Behavior 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | coverage/ 4 | .coverage 5 | .coveralls.yml 6 | .idea/ 7 | *.log 8 | .DS_Store 9 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | example/ 2 | webpack.config.js 3 | .eslintrc 4 | .babelrc 5 | Makefile 6 | CONTRIBUTING.md 7 | README.md 8 | server.js 9 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6" 4 | cache: yarn 5 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pburtchaell/react-input/793c857c8468c045ef7cc66c9dfda32123ef373f/.watchmanconfig -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Patrick Burtchaell 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Input 2 | 3 | ## Warning 4 | 5 | As of 2018 July 7, this project is depreciated and unmaintained. The package is still available on npm, but I would suggest finding an alternative. 6 | 7 | Good alternatives include: 8 | - [formik](https://github.com/jaredpalmer/formik) 9 | - [formsy-react](https://github.com/christianalfoni/formsy-react) 10 | - [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form) 11 | - [react-component/forms](https://github.com/react-component/form) 12 | 13 | ## Overview 14 | 15 | React input is a lightweight, dependency free component for building forms in React without having to think about what happens under the hood. It uses one component and an array of objects that describe the inputs in the form. 16 | 17 | ## Usage 18 | 19 | Install the component via npm: `npm install react-input`. 20 | 21 | ```js 22 |
{ 32 | // handle a changed value on the input 33 | }, 34 | renderAfter: () => ( 35 |
Include an element after the input, which is useful for instructional text or strength meters for passwords
36 | ), 37 | renderBefore: () => ( 38 |
Include an element before the input
39 | ) 40 | }, 41 | // additional inputs to include in the form 42 | ]} 43 | onChange={state => /* handle form change */ } 44 | onSubmit={state => /* handle form submit */ } 45 | /> 46 | ``` 47 | 48 | For a detailed example, see [the example project](/example). 49 | 50 | ### Form Props 51 | 52 | | Name | Type | Description | Required | Default | 53 | |-------------|----------|----------------------------------------------------------|---------- |----------| 54 | | fields | array | Array of inputs to include | true | | 55 | | labels | boolean | If false, labels are disabled | | true | 56 | | isPending | boolean | If true, an `.is-pending` class is added to the form | | null | 57 | | isRejected | boolean | If true, an `.is-rejected` class is added to the form | | null | 58 | | isFulfilled | boolean | If true, an `.is-fulfilled` class is added to the form | | null | 59 | 60 | The `isPending`, `isRejected` and `isFulfilled` props are useful to add different styles to the form for different states. 61 | 62 | ### Form Events 63 | 64 | | Event | Description | 65 | |--------- |---------------------------------------------------------------------------------------------------------| 66 | | onChange | Runs when any input in the form changes. The first parameter is the state of the form after the change. | 67 | | onSubmit | Runs when the submit button is clicked. The first parameter is the current state of the form. | 68 | 69 | ### Input Properties and Events 70 | 71 | Only text based inputs can be used, e.g., `email`, `text`, `tel` and `password`. 72 | 73 | #### Properties 74 | 75 | | Name | Type | Description | Required | Default | 76 | |--------------|----------|---------------------------------|---------- |----------| 77 | | key | string | Unique key for the field | true | | 78 | | type | string | The type of input | |`'text'` | 79 | | name | string | The name of input | | | 80 | | label | boolean | Label for the input field | | true | 81 | | required | boolean | Make field required | | true | 82 | | error | boolean | Is the input in an error state? | | false | 83 | | renderAfter | function | Element to render after the input | | | 84 | | renderBefore | function | Element to render before the input | | | 85 | 86 | #### Events 87 | 88 | | Event | Description | 89 | |--------- |-----------------------------------------------------------------------------| 90 | | onChange | Runs when the value of the input changes. The first parameter is the value. | 91 | 92 | In addition to the props listed above, all standard HTML input attributes are supported and can be used as props on the inputs. 93 | 94 | --- 95 | Copyright 2015 Patrick Burtchaell. Licensed MIT. 96 | -------------------------------------------------------------------------------- /bin/test.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Description: run tests normally, for local testing 4 | # Param 1: the reporter to use, defaults to spec 5 | runTests() 6 | { 7 | node_modules/.bin/jest 8 | } 9 | 10 | # Description: run tests with coverage 11 | runCoverageTests() 12 | { 13 | node_modules/.bin/jest --coverage 14 | } 15 | 16 | # If on Travis, run tests with Istanbul 17 | if [ -n "${TRAVIS_JOB_ID}" ]; then 18 | 19 | echo -e "Job id set to ${TRAVIS_JOB_ID}. \nRunning tests..." 20 | NODE_ENV=test runCoverageTests 21 | 22 | echo "Sending coverage information to Coveralls..." 23 | cat ./coverage/lcov.info | `npm bin`/coveralls || true 24 | rm -rf ./coverage 25 | 26 | # Otherwise, when local, run tests normally without Istanbul 27 | else 28 | NODE_ENV=test runTests ${REPORTER} 29 | fi 30 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | A simple example that demonstrates React input. 4 | 5 | 1. Clone the project. 6 | 2. Install dependencies: `npm install` 7 | 3. Run `npm start` 8 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Input Example 6 | 7 |
8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { render } from 'react-dom'; 3 | import Form from 'react-input'; 4 | 5 | const INITIAL_STATE = { 6 | name: null, 7 | email: null 8 | }; 9 | 10 | class ExampleForm extends Component { 11 | constructor(props) { 12 | super(props); 13 | 14 | this.state = INITIAL_STATE; 15 | } 16 | 17 | render() { 18 | return ( 19 |
20 |
Email: {this.state.email}
21 |
Name: {this.state.name}
22 |
23 | this.setState({ 40 | name, 41 | email 42 | })} 43 | /> 44 |
45 | ); 46 | } 47 | } 48 | 49 | render(, document.querySelector('#mount')); 50 | -------------------------------------------------------------------------------- /example/server.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var express = require('express'); 3 | var webpack = require('webpack'); 4 | var config = require('./webpack.config'); 5 | 6 | var app = express(); 7 | var compiler = webpack(config); 8 | 9 | app.use(require('webpack-dev-middleware')(compiler, { 10 | noInfo: true, 11 | publicPath: config.output.publicPath 12 | })); 13 | 14 | app.use(require('webpack-hot-middleware')(compiler, { 15 | log: console.log, 16 | path: '/__webpack_hmr', 17 | heartbeat: 10 * 1000 18 | })); 19 | 20 | app.get('*', function (req, res) { 21 | res.sendFile(path.join(__dirname, './index.html')); 22 | }); 23 | 24 | app.listen(8000, function (error) { 25 | if (error) throw error; 26 | 27 | console.log('Server running at http://localhost:8000.'); 28 | }); 29 | -------------------------------------------------------------------------------- /example/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | 4 | module.exports = { 5 | devtool: 'eval', 6 | cache: true, 7 | entry: { 8 | app: [ 9 | 'webpack-hot-middleware/client', 10 | path.resolve(__dirname, './index') 11 | ], 12 | }, 13 | resolve: { 14 | extensions: ['', '.js'], 15 | modulesDirectories: ['node_modules', 'src'] 16 | }, 17 | output: { 18 | path: path.join(__dirname, 'dist'), 19 | filename: '[name].js', 20 | publicPath: '/' 21 | }, 22 | plugins: [ 23 | new webpack.HotModuleReplacementPlugin(), 24 | new webpack.NoEmitOnErrorsPlugin() 25 | ], 26 | module: { 27 | rules: [{ 28 | test: /\.js$/, 29 | exclude: /node_modules/, 30 | use: { 31 | loader: 'babel-loader' 32 | } 33 | }] 34 | }, 35 | resolve: { 36 | alias: { 37 | 'react-input': path.join(__dirname, '..', 'src', 'form') 38 | } 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-input", 3 | "version": "4.1.4", 4 | "description": "A single parent component for building forms in React", 5 | "main": "dist/form.js", 6 | "scripts": { 7 | "precommit": "echo 'Running pre-commit hooks...' && npm test", 8 | "prepare": "npm run build", 9 | "prebuild": "npm test", 10 | "build": "node_modules/.bin/babel src -d dist --ignore spec.js,test.js", 11 | "pretest": "npm run lint", 12 | "test": "./bin/test.sh", 13 | "test-watch": "`npm bin`/jest --watch", 14 | "lint": "node_modules/.bin/eslint src/**/*.js test/**/*.js", 15 | "start": "NODE_ENV=development node ./example/server.js" 16 | }, 17 | "pre-commit": [ 18 | "precommit" 19 | ], 20 | "jest": { 21 | "setupFiles": [ 22 | "./test/setup.js", 23 | "./test/types.js" 24 | ], 25 | "snapshotSerializers": [ 26 | "/node_modules/enzyme-to-json/serializer" 27 | ] 28 | }, 29 | "repository": { 30 | "type": "git", 31 | "url": "https+git://github.com/pburtchaell/react-input.git" 32 | }, 33 | "keywords": [ 34 | "react", 35 | "react-component", 36 | "component", 37 | "components", 38 | "ui", 39 | "input", 40 | "forms", 41 | "form", 42 | "label", 43 | "field" 44 | ], 45 | "author": "Patrick Burtchaell (pburtchaell.com)", 46 | "license": "MIT", 47 | "bugs": { 48 | "url": "https://github.com/pburtchaell/react-input/issues" 49 | }, 50 | "homepage": "https://github.com/pburtchaell/react-input", 51 | "peerDependencies": { 52 | "react": "^0.14.0 || ^15.0.0 || ^16.0.0" 53 | }, 54 | "devDependencies": { 55 | "babel-cli": "^6.24.1", 56 | "babel-core": "^6.0.0", 57 | "babel-eslint": "^7.2.2", 58 | "babel-jest": "^19.0.0", 59 | "babel-loader": "^6.4.1", 60 | "babel-preset-es2015": "^6.24.1", 61 | "babel-preset-react": "^6.24.1", 62 | "babel-preset-stage-0": "^6.24.1", 63 | "coveralls": "^2.13.0", 64 | "enzyme": "^2.8.2", 65 | "enzyme-to-json": "^1.5.1", 66 | "eslint": "^3.10.2", 67 | "eslint-config-airbnb": "^13.0.0", 68 | "eslint-plugin-import": "^2.2.0", 69 | "eslint-plugin-jsx-a11y": "^2.2.3", 70 | "eslint-plugin-react": "^6.10.3", 71 | "express": "^4.15.2", 72 | "html-webpack-plugin": "^2.10.0", 73 | "jest": "^19.0.2", 74 | "pre-commit": "^1.2.2", 75 | "react": "^15.5.4", 76 | "react-dom": "^15.5.4", 77 | "react-test-renderer": "^15.5.4", 78 | "webpack": "^1.12.3", 79 | "webpack-dev-middleware": "^1.2.0", 80 | "webpack-hot-middleware": "^2.18.0" 81 | }, 82 | "dependencies": { 83 | "prop-types": "^15.5.8" 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/__snapshots__/field.spec.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` should render a field 1`] = ` 4 |
8 |
22 | `; 23 | -------------------------------------------------------------------------------- /src/__snapshots__/form.spec.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` should render an textarea element 1`] = ` 4 | 8 | 18 | 22 | 23 | `; 24 | -------------------------------------------------------------------------------- /src/__snapshots__/input.spec.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` should render a text input element 1`] = ` 4 | 7 | 8 | 13 | 14 | 15 | `; 16 | 17 | exports[` should render an textarea element 1`] = ` 18 | 21 |