https://github.com/andy9775/react-declare-form

https://github.com/andy9775/react-declare-form

form hooks react typescript

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/andy9775/react-declare-form
• Owner: andy9775
• License: apache-2.0
• Created: 2018-11-09T22:59:32.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-11-18T06:41:28.000Z (about 6 years ago)
• Last Synced: 2024-10-15T07:33:00.074Z (about 2 months ago)
• Topics: form, hooks, react, typescript
• Language: TypeScript
• Size: 22.5 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `react-declare-form`
• awesome-react-hooks-cn - `react-declare-form`
• awesome-react-hooks - `react-declare-form`
• awesome-react-hooks - `react-declare-form`

README

        
# react-declare-form

A declarative approach towards building forms in react

## NOTE: This project uses react hooks which are available in alpha.

View the RFC [here](https://github.com/reactjs/rfcs/pull/68)

## About

The purpose of **react-declare-form** is encapsulate form state management into a

root component which wraps children (input, button, select) to allow a

declarative way of building up forms.

**react-declare-form** supports handling of required components by defining a

callback function which returns if a form component has been filled out or not.

It also supports passing up errors. Both of these objects are available

throughout all form components which allows error messages to be displayed

around buttons and other form components for example.

**react-declare-form** only exports two elements. A root form component `Form`

which should be provided with wrapped components. Components should be wrapped

using `connectToForm` function which provides props to the form components to

be used in fetching and settings state, errors and required handler logic.

Anyone familiar with the Redux style connect function will be comfortable with

this pattern. This means that buttons, inputs, selects and other form

components need to be wrapped and built and are **not** provided.

## API

### Form Components

NOTE: Each form component should have a `stateKey` and `initialStateKey` prop

provided. Both of these should be unique as they identify that particular

components state throughout the form.

TODO

## Example

```javascript

let Input = props => (

   {

      e.preventDefault();

      props.setFormState(

        event.target.value, // state

        event.target.value // meta

      );

    }}

    type="text"

  />

);

Input = connectToForm(Input);

let Button = props => (

   props.onButtonClick(props.id)}>

    {this.props.children}

  

);

Button = connectToForm(Button, { setInitialStateCallback: false });

const initialState = { email: '[email protected]' };

const myForm = () => (

   {

      // Submit form

      api.post(url, formEvent.state.displayState);

    }}

    initialState={initialState}

  >

    

    Submit

  

);

```