https://github.com/ankeetmaini/simple-forms-react
An awesome Form for React!
https://github.com/ankeetmaini/simple-forms-react
Last synced: 12 months ago
JSON representation
An awesome Form for React!
- Host: GitHub
- URL: https://github.com/ankeetmaini/simple-forms-react
- Owner: ankeetmaini
- Created: 2018-01-07T06:43:47.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-14T12:45:12.000Z (over 8 years ago)
- Last Synced: 2025-03-18T03:22:31.884Z (about 1 year ago)
- Language: JavaScript
- Size: 15.6 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# simple-forms-react
> yet another Form component
# install
```
npm i -S simple-forms-react
```
# usage (simple, no validation)
```js
import React from 'react';
import { render } from 'react-dom';
import 'regenerator-runtime/runtime';
import Form from 'simple-forms-react';
const App = () => (
Simple Forms React!
{
console.log(values);
}}
>
{({ values, touched, fieldProps, handleSubmit }) => (
{touched.itemName && values.itemName && {values.itemName}
}
---select---
apple
orange
grapes
{touched.fruit && values.fruit && {values.fruit}
}
)}
);
render(, document.getElementById('root'));
```
[](https://codesandbox.io/s/r570l9r33m)
# usage (with validation, sync and async)
```js
import React from 'react';
import { render } from 'react-dom';
import styled from 'styled-components';
import 'regenerator-runtime/runtime';
import Form from 'simple-forms-react';
import Spinner from './Spinner';
const Container = styled.div`
padding: 10px;
`;
const ButtonDiv = styled.div`
margin: 30px 0;
`;
const Error = styled.div`
color: red;
`;
const InputHolder = styled.div`
margin: 12px 0;
`;
const nameValidator = val => {
const regex = new RegExp(/^\d+$/);
return !regex.test(val)
? { valid: true }
: { valid: false, message: 'No numbers allowed' };
};
const emptyValidator = val =>
!val ? { valid: false, message: 'This is required' } : { valid: true };
const usernameValidator = val =>
new Promise((resolve, reject) => {
setTimeout(() => resolve({ valid: true }), 5000);
});
const App = () => (
simple-forms-react
{
console.log('Submitted values: ', values);
setSubmitting(false);
}}
>
{({
values,
touched,
errors,
valid,
fieldProps,
handleSubmit,
isSubmitting,
}) => (
Name:
{touched.name && errors.name && {errors.name}}
Username
{valid.username && }
{touched.username &&
errors.username && {errors.username}}
{isSubmitting ? (
) : (
)}
)}
);
render(, document.getElementById('root'));
```
[](https://codesandbox.io/s/9ljqypo87o)
# third-party components integration
* [react-select](https://github.com/JedWatson/react-select) integration [](https://codesandbox.io/s/1xvn0z81j)
# api
# `Form` props
| name | type | default | description |
| ------------- | -------- | ------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
| initialValues | Object | {} | you should pass all the fields as keys and their default/initial values |
| children | function | `({values, touched, errors, valid, isSubmitting, fieldProps, handleSubmit, setValues, setSubmitting}) => {}` | this function should return the JSX which contains the form and all inputs |
| validators | Object | {} | this contains validators for each input, please see Validator section to see the contract of a validator function |
# `children` function arguments
| name | type | description |
| ------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| values | Object | contains values of all the inputs |
| touched | Object | key-value of inputs and whether they've been touched or not |
| errors | Object | errors object contains error message for inputs if there's an error |
| valid | boolean | tells if the entire form is valid or not |
| isSubmitting | boolean | tells if the form is submitting, useful to make your submit button disabled or hide altogether |
| fieldProps | function | this returns the props that need to be applied on the input, you should pass all the props in as an object, it chains onChange and other things which Form uses internally |
| handleSubmit | function | use this as onSubmit prop of `` |
| setValues | function | accepts an object and updates the values of the inputs as per the passed argument | |
| setSubmitting | function | a helper utility to change the `isSubmitting` flag. |