New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-form
Advanced tools
react-form - npm Package Compare versions
Comparing version 3.0.0-beta.0 to 3.0.0-beta.1
| { | ||
| "name": "react-form", | ||
| "version": "3.0.0-beta.0", | ||
| "version": "3.0.0-beta.1", | ||
| "description": "React Form is a lightweight framework and utility for building powerful forms in React applications.", | ||
| "main": "lib/index.js", | ||
| "module": "es/index.js", | ||
| "main": "dist/index.js", | ||
| "files": [ | ||
| "css", | ||
| "es", | ||
| "lib", | ||
| "umd" | ||
| "dist/" | ||
| ], | ||
| "scripts": { | ||
| "build": "nwb build-react-component --title React Form", | ||
| "clean": "nwb clean-module && nwb clean-demo", | ||
| "start": "nwb serve-react-demo", | ||
| "test": "mocha-webpack --opts tests/mocha-webpack.opts", | ||
| "test": "NODE_ENV=test mocha-webpack --opts test/mocha-webpack.opts", | ||
| "test:watch": "npm run test -- --watch", | ||
| "prepublishOnly": "yarn build", | ||
| "postPublish": "git push --tags", | ||
| "start": "NODE_ENV=development webpack-dev-server -d --config config/webpack/webpack.dev.config.js --port 4005 --hot", | ||
| "build:dev": "NODE_ENV=development webpack --config config/webpack/webpack.dev.config.js", | ||
| "build:dist": "NODE_ENV=production webpack -p --config config/webpack/webpack.dist.config.js", | ||
| "build:docs": "NODE_ENV=production webpack -p --config config/webpack/webpack.prod.config.js", | ||
| "eslint": "eslint src/** --fix", | ||
| "format": "prettier-eslint src/**/*.js", | ||
| "docs": "gitdocs serve" | ||
| "preversion": "npm test", | ||
| "version": "npm run build:dist", | ||
| "postpublish": "git push --tags" | ||
| }, | ||
| "authors": [ | ||
| { | ||
| "name": "Joseph Puzzo", | ||
| "email": "jgpuzzo2@gmail.com", | ||
| "url": "http://joepuzzo.github.io" | ||
| }, | ||
| { | ||
| "name": "Tanner Linsley", | ||
| "email": "tannerlinsley@gmail.com", | ||
| "url": "http://github.com/tannerlinsley" | ||
| } | ||
| ], | ||
| "author": { | ||
| "name": "Joseph Puzzo", | ||
| "email": "jgpuzzo2@gmail.com", | ||
| "url": "http://joepuzzo.github.io" | ||
| }, | ||
| "keywords": [ | ||
@@ -56,2 +46,4 @@ "react", | ||
| "dependencies": { | ||
| "babel-runtime": "^6.26.0", | ||
| "circular-json": "^0.4.0", | ||
| "classnames": "^2.2.5", | ||
@@ -61,2 +53,3 @@ "prop-types": "^15.5.10", | ||
| "redux": "^3.7.2", | ||
| "redux-logger": "^3.0.6", | ||
| "redux-thunk": "^2.2.0" | ||
@@ -69,31 +62,45 @@ }, | ||
| "devDependencies": { | ||
| "babel-core": "^6.26.0", | ||
| "babel-eslint": "^7.2.3", | ||
| "babel-loader": "^7.1.1", | ||
| "babel-plugin-transform-class-properties": "^6.24.1", | ||
| "babel-plugin-transform-runtime": "^6.23.0", | ||
| "babel-preset-env": "^1.6.1", | ||
| "babel-preset-env": "^1.6.0", | ||
| "babel-preset-react": "^6.24.1", | ||
| "babel-preset-stage-0": "^6.24.1", | ||
| "babel-runtime": "^6.26.0", | ||
| "chai": "^4.1.2", | ||
| "enzyme": "^3.3.0", | ||
| "enzyme-adapter-react-16": "^1.1.1", | ||
| "bootstrap": "^4.0.0-alpha.6", | ||
| "chai": "^4.1.1", | ||
| "copy-webpack-plugin": "^4.0.1", | ||
| "css-loader": "^0.28.5", | ||
| "enzyme": "^2.9.1", | ||
| "eslint": "^4.5.0", | ||
| "eslint-config-react-tools": "^1.0.10", | ||
| "eslint-config-airbnb": "^15.1.0", | ||
| "eslint-plugin-import": "^2.7.0", | ||
| "eslint-plugin-jsx-a11y": "^6.0.2", | ||
| "eslint-plugin-react": "^7.3.0", | ||
| "gitdocs": "^1.3.2", | ||
| "jsdom": "^11.6.0", | ||
| "mocha": "^5.0.0", | ||
| "mocha-webpack": "^1.0.1", | ||
| "nwb": "^0.21.2", | ||
| "nwb-sass": "^0.8.2", | ||
| "file-loader": "^1.1.5", | ||
| "jsdom": "^9.9.1", | ||
| "mocha": "^3.5.0", | ||
| "mocha-webpack": "^0.7.0", | ||
| "node-sass": "^4.5.3", | ||
| "prettier-eslint-cli": "^4.7.0", | ||
| "react": "^16.2.0", | ||
| "react-addons": "^0.9.1-deprecated", | ||
| "prismjs": "^1.6.0", | ||
| "raw-loader": "^0.5.1", | ||
| "react": "^15.6.1", | ||
| "react-addons-test-utils": "^15.6.2", | ||
| "react-dom": "^16.2.0", | ||
| "react-prism": "^4.3.2", | ||
| "react-dom": "^15.6.1", | ||
| "react-hot-loader": "^3.0.0-beta.7", | ||
| "react-prism": "^4.3.0", | ||
| "react-router-dom": "^4.2.2", | ||
| "react-router-hash-link": "^1.1.1", | ||
| "sinon": "^4.1.6" | ||
| "react-test-renderer": "^15.6.2", | ||
| "sass-loader": "^6.0.6", | ||
| "sinon": "^3.2.1", | ||
| "style-loader": "^0.18.2", | ||
| "uglify-js": "^3.1.10", | ||
| "url-loader": "^0.5.9", | ||
| "webpack": "^3.5.5", | ||
| "webpack-dev-server": "^2.7.1", | ||
| "webpack-node-externals": "^1.6.0" | ||
| } | ||
| } |
159
README.md
| # React-Form | ||
| Simple, powerful, highly composable forms in React | ||
| A powerful and lightweight form library for React. | ||
| # *Update:* V3 is comming! | ||
| We are actively working on V3 of React Form. This update will include many enhancements including field level validation, and a simplified interface. Stay tuned! For additional information we have created a Git issue called `React Form 3.0`. | ||
| ### Go to [live examples, code and docs](https://react-form.js.org)! | ||
| [](https://travis-ci.org/react-tools/react-form) | ||
| [](https://www.npmjs.com/package/react-form) | ||
| [](https://www.npmjs.com/package/react-form) | ||
| [](https://github.com/react-tools/react-form/blob/master/LICENSE) | ||
| [](https://react-chat-signup.herokuapp.com/) | ||
| [](https://travis-ci.org/react-tools/react-form) | ||
| # Features | ||
| - 🚀 Lightweight and fast. | ||
| - 🔥 Built-in input primitives for building quickly. | ||
| - ⚖️ Scales from tiny to massively complex forms with ease. | ||
| - 🚚 Easily integrate with 3rd party components or build your own! | ||
| - ✍️ Nested Fields and ultra-composable syntax for complex form shapes. | ||
| - ⏲ Asynchronous validation | ||
| - 🎛 Simple API that supports manipulating values, errors, warnings, and successes | ||
| - 👉 Render Props! | ||
| - 😂 Works in IE (with a polyfill or two) | ||
| # Intro | ||
| Say hello to the best react form library you have ever used! `react-form` is an extensive, simple, and efficient solution for creating simple to complex forms in react. Out of the box you get the ability to grab and manipulate values; set errors, warnings, and successes; customize your inputs, perform asynchronous validation, and much more! If you want to check out the cool stuff and how to use this library, head over to the docs [here](https://react-form.js.org). | ||
| ## Questions? Ideas? Chat with us! | ||
| Sign up for the [React-Tools Slack Org](https://react-chat-signup.herokuapp.com/)! | ||
| # Motivation | ||
| Simplicity and efficiency. This form works in IE! and its fast! | ||
| There are many other libraries that exist, but they don't function in | ||
| IE and, can get pretty complex. You can create very complex forms quickly, | ||
| with only a few lines of code. | ||
| ### Installation | ||
| # Installation | ||
| `npm install --save react-form` | ||
| ### Basic Usage | ||
| # Basic usage | ||
| ```javascript | ||
| import { Form, Text, Radio, TextArea, Checkbox } from 'react-form'; | ||
| import { Form, Text } from 'react-form'; | ||
| const ExampleForm = () => ( | ||
| <Form render={({ | ||
| submitForm | ||
| }) => ( | ||
| <form onSubmit={submitForm}> | ||
| <Text field="firstName" placeholder='First Name' /> | ||
| <Text field="lastName" placeholder='Last Name' /> | ||
| <div> | ||
| <label> | ||
| Male <Radio field='gender' value="male" /> | ||
| </label> | ||
| <label> | ||
| Female <Radio field='gender' value="female" /> | ||
| </label> | ||
| </div> | ||
| <TextArea field="bio" /> | ||
| <Checkbox field="agreesToTerms" /> | ||
| <button type="submit">Submit</button> | ||
| </form> | ||
| )} /> | ||
| ) | ||
| const ExampleForm = ( ) => { | ||
| return ( | ||
| <Form> | ||
| { formApi => ( | ||
| <form onSubmit={formApi.submitForm} id="form1"> | ||
| <label htmlFor="hello">Hello World</label> | ||
| <Text field="hello" id="hello" /> | ||
| <button type="submit">Submit</button> | ||
| </form> | ||
| )} | ||
| </Form> | ||
| ); | ||
| } | ||
| ``` | ||
| --- | ||
| ### Array and Data-driven fields | ||
| ```javascript | ||
| import { Form, Text } from 'react-form'; | ||
|  | ||
| const ExampleForm = () => ( | ||
| <Form render={({ | ||
| submitForm, | ||
| values, | ||
| addValue, | ||
| removeValue | ||
| }) => ( | ||
| <form onSubmit={submitForm}> | ||
| <Text field="firstName" placeholder='First Name' /> | ||
| <Text field="lastName" placeholder='Last Name' /> | ||
| <div> | ||
| Friends | ||
| {values.friends && values.friends.map((friend, i) => ( | ||
| // Loop over the friend values and create fields for each friend | ||
| <div> | ||
| <Text field={['friends', i, 'firstName']} placeholder='First Name' /> | ||
| <Text field={['friends', i, 'lastName']} placeholder='Last Name' /> | ||
| --- | ||
| // Use the form api to add or remove values to the friends array | ||
| <button onClick={() => removeValue('friends', i)> | ||
| Remove Friend | ||
| </div> | ||
| </div> | ||
| ))} | ||
| // Use the form api to add or remove values to the friends array | ||
| <button onClick={() => addValue('friends', {})> | ||
| Add Friend | ||
| </button> | ||
| </div> | ||
| <button type="submit">Submit</button> | ||
| </form> | ||
| )} /> | ||
| ) | ||
| ``` | ||
|  | ||
| ### Advanced Field reuse, and Nested Fields | ||
| ```javascript | ||
| import { Form, FormApi, NestedField, Text } from 'react-form'; | ||
| // Reuse The user fields for the user and their friends! | ||
| const UserFields = () => ( | ||
| <div> | ||
| <Text field="firstName" placeholder='First Name' /> | ||
| <Text field="lastName" placeholder='Last Name' /> | ||
| </div> | ||
| ) | ||
| # Examples & Documentation | ||
| Go [here](https://react-form.js.org) for examples and documentation for **2.x.x** of React-Form. | ||
| const ExampleForm = () => ( | ||
| <Form render={({ | ||
| submitForm, | ||
| values, | ||
| addValue, | ||
| removeValue | ||
| }) => ( | ||
| <form onSubmit={submitForm}> | ||
| <UserFields /> | ||
| <NestedField field='friends' render={() => ( // Create a new nested field context | ||
| <div> | ||
| Friends | ||
| {values.friends.map((friend, i) => ( | ||
| <div> | ||
| <NestedField field={['friends', i]} render={() => ( | ||
| <UserFields /> // Now the user fields will map to each friend! | ||
| )} /> | ||
| <button onClick={() => removeValue('friends', i)> | ||
| Remove Friend | ||
| </div> | ||
| </div> | ||
| ))} | ||
| <button onClick={() => addValue('friends', {})> | ||
| Add Friend | ||
| </button> | ||
| </div> | ||
| )}/> | ||
| <button type="submit">Submit</button> | ||
| </form> | ||
| )} /> | ||
| ) | ||
| ``` | ||
| ### Examples & Documentation | ||
| [Visit react-form.js.org](https://react-form.js.org) for examples and documentation for **2.x.x** of React-Form. | ||
| Older versions: | ||
| * [Version 1.x.x](https://github.com/react-tools/react-form/tree/v1.3.0) |
New alerts
Empty package
Supply chain riskPackage does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No contributors or author data
MaintenancePackage does not specify a list of contributors or an author in package.json.
Found 1 instance in 1 package
Improved metrics
- Number of low maintenance alerts
- decreased by-33.33%
2
Worsened metrics
- Total package byte prevSize
- decreased by-97.65%
6331
- Dependency count
- increased by42.86%
10
- Dev dependency count
- increased by50%
42
- Number of package files
- decreased by-92.31%
4
- Lines of code
- decreased by-100%
0
- Number of lines in readme file
- decreased by-61.38%
56
- Number of medium supply chain risk alerts
- increased by100%
2
Dependency changes
+ Addedbabel-runtime@^6.26.0
+ Addedcircular-json@^0.4.0
+ Addedredux-logger@^3.0.6
+ Addedbabel-runtime@6.26.0(transitive)
+ Addedcircular-json@0.4.0(transitive)
+ Addedcore-js@2.6.12(transitive)
+ Addeddeep-diff@0.3.8(transitive)
+ Addedredux-logger@3.0.6(transitive)
+ Addedregenerator-runtime@0.11.1(transitive)