ReactJS Form Management based on React Context
npm install context-form> Form Management for React & React Native with a simple and flexible API.
> Demo: https://youshido.github.io/context-form/demo/
> Docs: https://youshido.github.io/context-form/
Thanks to the Context API \(as of React 16.3\) it is possible to write a library for the Form Management with a very clean and almost invisible API where you don't have to pass Form's props all over your project.
* Declarative API with no need for extra props passing
* InitialValues as a simple prop to the
* Controlled and Uncontrolled Form State
* Field Arrays and Groups with custom JSX/Fields structure
* Easy to implement Custom Controls
* Support for the complex JSX structure inside the Form
* Themes support — implement project-wide styling in a single file
* Ready to go integrations with Bootstrap, Ant and Material UI
* And it's simply a that's fun to use :\)
Add context-form package to your project using yarn or npm:
``bash`
$ yarn add context-form (or npm i context-form)
Once you installed Context Form as a dependency you can try it out with this basic example of the uncontrolled form \(note, it uses console to log the values submitted and does automatic field validation for a title field \(required is just a shortcut for the more extensive rules props\)
Once you installed Context Form as a dependency you can try it out with this basic example of the uncontrolled form \(note, it uses console to log the values submitted and does automatic field validation for a title field \(required is just a shortcut for the more extensive rules props\):
`jsx
import React, { Component } from 'react';
import Form, { Field, FormFooter } from 'context-form';
class ProductPage extends Component {
/**
* By default onSubmit will be called only if validation``
*/
onSubmit = ({ values }) => {
console.log('Form Values', values);
};
render() {
return (
)
}
}
You can now take a look at the more advances usage in the docs: https://youshido.github.io/context-form/