react-component-form

Manage React Forms with ease.

📜 About

react-component-form is a lightweight form component for React.js, it allows you to get the inputs values without state with onChange or onSubmit props.

Demo : https://divlo.github.io/react-component-form/.

💾 Install

npm install --save react-component-form

⚙️ Usage

import React from 'react'
import Form, { HandleForm } from 'react-component-form'

const Example = () => {
  const handleSubmit: HandleForm = (formData, formElement) => {
    console.log(formData) // { inputName: 'value of the input' }
    formElement.reset()
  }

  return (
    <Form onSubmit={handleSubmit}>
      <input type='text' name='inputName' />
      <button type='submit'>Submit</button>
    </Form>
  )
}

Basically you have access to the same props of the HTML form tag in React, but the onSubmit and the onChange props are differents.

Instead to get the event params you get formData and formElement :

• formData: It's an object where the keys are the name of your inputs and the current value. Behind the scene, it uses the FormData constructor.
• formElement: It's the actual HTML form element in the DOM so for example you can access the .reset() method on a HTMLFormElement.

📄 License

MIT