1
1
mirror of https://github.com/theoludwig/react-component-form.git synced 2024-07-17 07:30:13 +02:00
Go to file
2022-08-26 20:19:31 +02:00
.github ci: runs on develop branch 2022-08-26 16:29:20 +02:00
example chore: add example 2022-08-26 20:19:31 +02:00
src chore: add example 2022-08-26 20:19:31 +02:00
.commitlintrc.json chore: rewrite package 2021-06-17 18:48:19 +02:00
.editorconfig fix(hooks): usage of useForm 2022-08-26 00:30:54 +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: publish on beta channel correctly 2022-08-26 16:32:46 +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 feat: add form validation 2022-08-25 23:24:40 +02:00
package.json feat: add form validation 2022-08-25 23:24:40 +02:00
README.md fix(hooks): usage of useForm 2022-08-26 00:30:54 +02:00
tsconfig.json fix: build issue with "React is not defined" 2022-04-07 11:37:42 +02:00
tsup.config.js feat: add form validation 2022-08-25 23:24:40 +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.

There is also a React Hooks to be used in combination with the <Form /> component to validate the data with Ajv JSON schema validator, see advanced usage.

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

💾 Install

npm install --save react-component-form

⚙️ Usage

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

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

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

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

⚙️ Advanced Usage

This example shows how to use the <Form /> component with useForm hook to validate the data with Ajv JSON schema validator.

You can see a more detailled example in the ./example folder.

import React from 'react'
import { Form, useForm } from 'react-component-form'
import type { HandleUseFormCallback } from 'react-component-form'

const schema = {
  inputName: {
    type: 'string',
    minLength: 3,
    maxLength: 20
  }
}

export const Example = () => {
  const { errors, handleUseForm } = useForm(schema)

  const onSubmit: HandleUseFormCallback<typeof schema> = (
    formData,
    formElement
  ) => {
    console.log(formData) // { inputName: 'value of the input validated' }
    formElement.reset()
    return null
  }

  return (
    <Form onSubmit={handleUseForm(onSubmit)}>
      <input type='text' name='inputName' />
      {errors.inputName != null && <p>{errors.inputName[0].message}</p>}

      <button type='submit'>Submit</button>
    </Form>
  )
}

💡 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