This repository has been archived on 2024-11-11. You can view files and clone it, but cannot push or open issues or pull requests.
Go to file
2022-08-25 22:51:40 +02:00
.github perf: reduce drastically build size 2022-04-06 23:52:50 +02:00
example build(deps): update latest 2022-08-25 22:51:40 +02:00
src fix: build issue with "React is not defined" 2022-04-07 11:37:42 +02:00
.commitlintrc.json chore: rewrite package 2021-06-17 18:48:19 +02:00
.editorconfig 🎉 Initial commit 2020-08-04 16:22:31 +02:00
.eslintignore perf: reduce drastically build size 2022-04-06 23:52:50 +02:00
.eslintrc.json perf: reduce drastically build size 2022-04-06 23:52:50 +02:00
.gitattributes chore: maintenance 2022-02-19 17:18:13 +01:00
.gitignore perf: reduce drastically build size 2022-04-06 23:52:50 +02:00
.markdownlint-cli2.jsonc build(deps): update latest 2022-08-25 22:51:40 +02:00
.npmrc chore: rewrite package 2021-06-17 18:48:19 +02:00
.prettierrc.json perf: reduce drastically build size 2022-04-06 23:52:50 +02:00
.releaserc.json chore: add semantic-release 2021-06-17 19:32:56 +02:00
CODE_OF_CONDUCT.md chore: rewrite package 2021-06-17 18:48:19 +02:00
CONTRIBUTING.md perf: reduce drastically build size 2022-04-06 23:52:50 +02:00
jest.config.json fix: build issue with "React is not defined" 2022-04-07 11:37:42 +02:00
LICENSE chore(release): v1.3.0 2020-12-27 19:47:15 +01:00
package-lock.json build(deps): update latest 2022-08-25 22:51:40 +02:00
package.json build(deps): update latest 2022-08-25 22:51:40 +02:00
README.md chore: add semantic-release 2021-06-17 19:32:56 +02:00
tsconfig.json fix: build issue with "React is not defined" 2022-04-07 11:37:42 +02:00
tsup.config.js perf: reduce drastically build size 2022-04-06 23:52:50 +02:00

react-component-form

Manage React Forms with ease.

Licence MIT Contributor Covenant

Conventional Commits semantic-release npm version

📜 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/.

💾 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.

💡 Contributing

Anyone can help to improve the project, submit a Feature Request, a bug report or even correct a simple spelling mistake.

The steps to contribute can be found in CONTRIBUTING.md.

📄 License

MIT