Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ambewas/react-minimal-form

Tiny, blazing fast react forms using the context API, a higher order component to build your own form elements
https://github.com/ambewas/react-minimal-form

Last synced: 12 days ago
JSON representation

Tiny, blazing fast react forms using the context API, a higher order component to build your own form elements

Awesome Lists containing this project

README 

        
Tiny, simple, fast react forms using the new context API (Provider/Consumer pair). 🚀



[demo website](http://react-minimal-form.surge.sh/)

# React-minimal-form is:

- A small package (only 5kb!)

- Really easy to use, while also supporting complex forms

- Generic! You can build your own form components with our provided HOC (or use our preconfigured, unstyled form elements)

- Fast. Yes, even with hundreds of form elements on one page.

- Almost dependency free! Well, let's not count react 😇. Right now the only dependency is a package to make the new context API backwards compatible for older versions of react. We plan to remove it in the future.

- Compatible with your version of React. While we use the new context API, older versions of react are supported.



# install

`npm i --save react-minimal-form`



# Usage

## Building a form

Building a form in React shouldn't be hard. With react-minimal-form, you could even call it fun again.



Here's how it works...



Change handling & input values for form components are provided by the `` component by leveraging the new React context API. It works, however deeply nested these components are.



This means it is possible to render a form spread out over different `routes` with `react-router`, allowing you to build very complex flows while still maintaining your form state in one place.



Internally, Form is a context Provider. A higher order component, `makeFormElement` is the context Consumer.



Called with any react component, the HOC will make sure values & change events are handled accordingly. `makeFormElement` is wrapped around all our exposed form elements.



By implementing a context-aware `shouldComponentUpdate` lifecycle in `makeFormComponent` that does not break other functionality such as prop updates, react-minimal-form works blazingly fast, even with hundreds of form elements on one page.



Here's the code for a very basic form:



```js

import React, { Component } from "react";

import { Form, TextInput, TextArea, RadioGroup, Checkbox } from "react-minimal-form";



// generate a bunch of textinputs to gauge performance

const AllTextinputs = [...Array(300)].map((_, i) => );



class App extends Component {

  constructor() {

    super();

    this.state = {

      enabled: false,

      // formData can be provided initially, but this is not necessary.

      formData: {

        myTextInput: "an initial value",

        // initially, value "three" is checked in this radiogroup

        firstRadioGroup: "three",

        mycheckbox: true,

        address: {

          street: 'mainstreet'

        }

      },

    };

  }



  handleChange = formData => {

    this.setState({

      formData,

    });

  }



  render() {

    return (

       /* do things with data */}

      >

        

        



        {AllTextinputs}



        

         this.setState({ enabled: !this.state.enabled })}>enable

        



        

        checkbox label

      

    );

  }

}



export default App;

```



## Custom form elements

This library exposes a couple of generic, minimalistic form components such as a textinput, textarea,... that automatically work with ``.



However, with our exposed HOC `makeFormElement`, you can build your own form inputs as well. As explained, it handles the onChange & value prop for you, but obviously you must pass it through to your own custom input elements as well.



This allows you to build your own styled form inputs, where you can implement your own custom behavior.



```js

import React from "react";

import { makeFormElement } from "react-minimal-form";



const TextInput = (props) => {

  return (

    

  );

};



export default makeFormElement(TextInput);

```



## Nested paths

As of react-minimal-form v1, it's possible to identify nested values for your formData with a dot-separated string: (pseudocode)



```

state = {

  formData: {

    address: {

      street: 'some street'

    }

  }

}



```



## Validation

Right now, we leave form validation up to you. It is trivial to implement for example a `joi` (or any other validator) scheme in the `onChange` or the `onSubmit` callbacks.



To get an overview of touched fields, simply look at all the keys that are currently available in `formData`.



## Documentation



### ``

Form is a controlled component. Supply an onChange & formData prop to make it work.



| Property | Type | Required | Description

|----------|:----:|---------:|-----------:|

| children | any | no | Any form element |

| onChange | function | yes | Callback executed on change of every form element |

| onSubmit | function | yes | Callback executed on form submit |

| formData | object | yes | Object with all the form data |



### Form elements



All html properties are passed to a form element. In addition, these props are available:



| Property | Type | Required | Description

|----------|:----:|---------:|----------:|

| id | string | yes | A unique ID used by Form to handle changes and set values. This can be a dot-separated path to your nested form value |

| onChange | function | no | Add your own custom onChange handler as well. Will execute after the form change. Params: `id`, `value` |