1
1
mirror of https://github.com/theoludwig/react-component-form.git synced 2024-07-17 07:30:13 +02:00
react-component-form/README.md

67 lines
3.1 KiB
Markdown
Raw Normal View History

2020-08-04 16:22:31 +02:00
<h1 align="center">react-component-form</h1>
<p align="center">
<strong>Manage React Forms with ease.</strong>
</p>
<p align="center">
<a href="./CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat" /></a>
2020-12-27 19:47:15 +01:00
<a href="./LICENSE"><img src="https://img.shields.io/badge/licence-MIT-blue.svg" alt="Licence MIT"/></a>
2021-06-17 18:48:19 +02:00
<a href="./CODE_OF_CONDUCT.md"><img src="https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg" alt="Contributor Covenant" /></a>
<br />
<a href="https://github.com/Divlo/react-component-form/actions/workflows/build.yml"><img src="https://github.com/Divlo/react-component-form/actions/workflows/build.yml/badge.svg?branch=master" /></a>
<a href="https://github.com/Divlo/react-component-form/actions/workflows/lint.yml"><img src="https://github.com/Divlo/react-component-form/actions/workflows/lint.yml/badge.svg?branch=master" /></a>
<a href="https://github.com/Divlo/react-component-form/actions/workflows/test.yml"><img src="https://github.com/Divlo/react-component-form/actions/workflows/test.yml/badge.svg?branch=master" /></a>
<br />
2020-12-27 19:47:15 +01:00
<a href="https://conventionalcommits.org"><img src="https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg" alt="Conventional Commits" /></a>
2021-06-17 18:48:19 +02:00
<a href="https://www.npmjs.com/package/react-component-form"><img src="https://img.shields.io/npm/v/react-component-form.svg" alt="npm version"></a>
2020-08-04 16:22:31 +02:00
</p>
## 📜 About
2020-08-05 02:53:04 +02:00
**react-component-form** is a lightweight form component for [React.js](https://reactjs.org/), it allows you to get the inputs values without state thanks to `onChange` or `onSubmit` props.
2020-08-04 16:22:31 +02:00
2020-08-04 22:51:58 +02:00
Demo : [https://divlo.github.io/react-component-form/](https://divlo.github.io/react-component-form/).
2020-08-04 16:49:14 +02:00
2020-10-03 19:07:09 +02:00
This project was bootstrapped with [create-react-library](https://www.npmjs.com/package/create-react-library).
2020-08-04 16:22:31 +02:00
## 💾 Install
2020-10-03 19:07:09 +02:00
```sh
2020-08-04 16:22:31 +02:00
npm install --save react-component-form
```
2020-08-04 16:49:14 +02:00
## ⚙️ Usage
2020-08-04 16:22:31 +02:00
```tsx
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>
)
}
```
2020-08-05 02:53:04 +02:00
_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._
2020-08-04 16:22:31 +02:00
Basically you have access to the same props of the HTML `form` tag in React, but the onSubmit and the onChange props are differents.
2020-08-05 02:53:04 +02:00
Instead to get the `event` param you get `formData` and `formElement` params :
2020-08-04 16:22:31 +02:00
2020-08-05 02:53:04 +02:00
- `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](https://developer.mozilla.org/docs/Web/API/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](https://developer.mozilla.org/docs/Web/API/HTMLFormElement).
2020-08-04 16:22:31 +02:00
## 📄 License
[MIT](./LICENSE)