react-component-form

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 thanks to onChange or onSubmit props.

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

This project was bootstrapped with create-react-library.

💾 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>
  )
}

Note : The example use TypeScript, but obviously you can use JavaScript. Be aware that HandleForm is the type definition for the onChange and onSubmit props.

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 param you get formData and formElement params :

• 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