react-form - npm Package Compare versions

Comparing version 0.0.17 to 0.9.0

package.json

 {
   "name": "react-form",
-  "version": "0.0.17",
+  "version": "0.9.0",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
@@ -13,5 +13,6 @@ "license": "MIT",
     "react",
-    "table",
-    "react-form",
-    "datagrid"
+    "form",
+    "forms",
+    "form builder",
+    "nested forms"
   ],
@@ -18,0 +19,0 @@ "main": "lib/index.js",

README.md

@@ -5,5 +5,6 @@ <div align="center">
   <br />
+
 </div>
 
-[![npm version](https://badge.fury.io/js/react-form.svg)](https://badge.fury.io/js/react-form) [![Build Status](https://travis-ci.org/tannerlinsley/react-form.svg?branch=master)](https://travis-ci.org/tannerlinsley/react-form) [![Libraries.io for GitHub](https://img.shields.io/librariesio/github/tannerlinsley/react-form.svg)]()
+[![Build Status](https://travis-ci.org/tannerlinsley/react-form.svg?branch=master)](https://travis-ci.org/tannerlinsley/react-form) [![npm](https://img.shields.io/npm/dm/react-form.svg)](https://npmjs.com/packag/react-form) [![react-form on Slack](https://img.shields.io/badge/slack-react--form-blue.svg)](https://react-table-slack.herokuapp.com/) [![GitHub stars](https://img.shields.io/github/stars/tannerlinsley/react-form.svg?style=social&label=Star)](https://github.com/tannerlinsley/react-form) [![Twitter Follow](https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow)](https://twitter.com/tannerlinsley)
 
@@ -41,51 +42,124 @@ React Form is a lightweight framework and utility for building powerful forms in React applications.
 
-<a name="installation"></a>
 ## Installation
 ```bash
-$ npm install tl-react-form
+$ npm install react-form
 ```
 
-<a name="example"></a>
-## Quick Example
+## Usage
 ```javascript
 import React from 'react'
-import { Form, Text } from 'react-form'
+import { Form, Text, Checkbox, Textarea, Select } from 'react-form'
 
+// To create a new form, simply call `Form(config)(component)`
+
 const MyForm = Form({
+  // This is our config for the form. Think of it as the default props for your Form :)
+
+  // Let's give the form some hard-coded default values
+  defaultValues: {
+    status: 'single'
+    friends: [],
+  }
+
+  // Validating your form is super easy, just use the `validate` life-cycle method
   validate: values => {
+    // To create form errors, return an object that maps field names with error messages.
+    // There are many ways to do this, below is just one example:
     return {
-      firstName: !values.firstName ? 'Required' : undefined,
-      lastName: !values.lastName ? 'Required' : undefined,
-      hobby: !values.hobby ? 'Required' : undefined
+      // If a field has a validation error, set that field to a string that is the error message for that field
+      // If the field is valid, return any falsey value to mark it as valid.
+      name: !values.name ? 'A name is required' : undefined,
+      hobby: (values.hobby && values.hobby.length < 5) ? 'Your hobby must be at least 5 characters long' : false,
+      status: !values.status ? 'A status is required' : null,
+      address: !values.address ? 'A valid address is required' : 0
+      // you don't need to return anything at all for fields you don't need to validate
     }
+  },
+
+  // `onValidationFail` is another handy form life-cycle method
+  onValidationFail () {
+    window.alert('There is something wrong with your form!  Please check for any required values and try again :)')
   }
-})(({ submitForm }) => {
+})(({ values, submitForm, addValue, removeValue }) => {
+  // This is a stateless component, but you can use any valid react component to render your form.
+  // Forms also supply plenty of useful props for your components to utilize. See the docs for a complete list.
   return (
+    // When the form is submitted, call the `sumbitForm` callback prop
     <form onSubmit={submitForm}>
-      <Text
-        field='firstName'
-        placeholder='First Name'
+
+      <Text // This is the built-in Text formInput
+        field='name' // field is a string version of the field location
+        placeholder='Full Name' // all other props are sent through to the underlying component, in this case an <input />
       />
-      <Text
-        field='lastName'
-        placeholder='Last Name'
-      />
-      <Text
-        field='hobby'
-        placeholder='Hobby'
-      />
-      <Select
+
+      <Select // This is the built-in Select formInput
         field='status'
-        options={[{
-          label: 'Available',
-          value: 'available'
+        options={[{ // You can ship it some options like usual
+          label: 'Single',
+          value: 'single'
         }, {
-          label: 'Unavailable',
-          value: 'unavailable'
+          label: 'In a Relationship',
+          value: 'relationship'
+        }, {
+          label: 'It\'s Complicated',
+          value: 'complicated'
         }]}
       />
-      <Textarea
-        field='notes'
-        placeholder='Notes'
+
+      <Textarea // This is the built-in Textarea formInput
+        field='bio'
+        placeholder='Short Bio'
       />
+
+      // Arrays in forms are super easy to handle
+      {values.friends.map((friends, i) => ( // Loop over the values however you'd like
+        <div>
+
+          <Text
+            field={['friends', i, 'name']} // You can easily pass an array-style field path. Perfect for passing down as props or nested values
+            placeholder='Friend Name'
+          />
+
+          <Select
+            field={`friends.${i}.relationship`} // If you don't like arrays, you can also use a string template
+            options={[{
+              label: 'Friend',
+              value: 'friend'
+            }, {
+              label: 'Acquaintance',
+              value: 'acquaintance'
+            }, {
+              label: 'Colleague',
+              value: 'colleague'
+            }]}
+          />
+
+          // This button will remove this friend from the `friends` field
+          <button
+            type='button'
+            onClick={removeValue(['friends', i])} // `removeValue` takes a field location for an item in an array
+          >
+            Remove Friend
+          </button>
+
+        </div>
+      ))}
+
+      // This button will add a new blank friend item to the `friends` field
+      <button
+        type='button'
+        onClick={addValue('friends', {})} // `addValue` takes an array-like field, and the value to add
+       >
+        Remove Friend
+      </button>
+
+      // An address has a couple of parts to it, and will probably have its own validation function.
+      // Let's make it reusable by using a nested form
+      <NestedForm
+        form={AddressForm} // This is just another form that we built below
+        field='address' // The results of this nested form will be set here on this form.
+      />
+
+      // Since this is the parent form, let's put a submit button in there ;)
+      // You can submit your form however you want, as long as you call the `submitForm` callback
       <button>
@@ -98,5 +172,39 @@ Submit
 
+// This is our reusable address form
+const AddressForm = Form({
+  // It can have its own validation function!
+  validate: values => {
+    return {
+      street: !values.street ? 'street' : undefined
+      city: !values.city ? 'city' : undefined
+      state: !values.state ? 'state' : undefined
+    }
+  }
+})(({values}) => {
+  return (
+    <div>
+      <Text
+        field='street'
+        placeholder='Address'
+      />
+      <Text
+        field='city'
+        placeholder='City'
+      />
+      <Text
+        field='state'
+        placeholder='State'
+      />
+    </div>
+  )
+})
+
+
 export default props => {
   return (
     <MyForm
+      // If you wanted to feed your form some existing values, use the `values` prop
+      values={{
+        name: 'Tanner Linsley'
+      }}
       onSubmit={(values) => {
@@ -118,5 +226,5 @@ window.alert(JSON.stringify(values, null, 2))
 - The React Component you provide will receive the following as props:
-  1. Current Form State
-  1. Form API methods
-  1. Finally, any other props passed to your form component
+  - Current Form State
+  - Form API methods
+  - Finally, any other props passed to your form component
 
@@ -139,5 +247,5 @@ **Example**
 You can define form props and lifecycle methods at 3 different levels:
-1. Globally via `FormDefaultProps` (See [{FormDefaultProps}](#-formdefaultprops-))
-1. Per form by passing `defaultProps` to `Form`
-1. Per instance by using a standard react prop when rendering the form.
+- Globally via `FormDefaultProps` (See [{FormDefaultProps}](#-formdefaultprops-))
+- Per form by passing `defaultProps` to `Form`
+- Per instance by using a standard react prop when rendering the form.
 
@@ -144,0 +252,0 @@ Here is a list of all available properties and lifecycle methods that React-Form uses:

Fixed alerts

Major refactor

Supply chain risk

Package 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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

171797

increased by2.74%

Number of lines in readme file

820

increased by15.17%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes