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
Divlo 69f12002c7
build(deps): update latest
BREAKING CHANGE: peerDependencies: `react@>=18.2.0`
2023-04-02 21:52:34 +02:00
.github build(deps): update latest 2023-04-02 21:52:34 +02:00
example build(deps): update latest 2023-04-02 21:52:34 +02:00
src build(deps): update latest 2023-04-02 21:52:34 +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 chore: remove usage of styled-jsx 2022-10-03 21:23:17 +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 fix: update dependencies to latest 2023-01-10 21:23:32 +01:00
.markdownlint.json fix: update dependencies to latest 2023-01-10 21:23:32 +01: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 ci: release only stable on master branch 2022-08-26 22:48:52 +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 2023-04-02 21:52:34 +02:00
package.json build(deps): update latest 2023-04-02 21:52:34 +02:00
README.md chore: remove usage of styled-jsx 2022-10-03 21:23:17 +02:00
tsconfig.json fix: update dependencies to latest 2023-01-10 21:23:32 +01: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.

Example demo: https://react-component-form.vercel.app/.

💾 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: Object where the keys are the name of your inputs and the current value. Behind the scene, it uses the FormData constructor.
  • formElement: The 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 { handleUseForm, errors, message } = useForm(schema)

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

    // The return can be either `null` or an object with a global message of type `'error' | 'success'`.
    return {
      type: 'success',
      value: 'Success: Form submitted'
    }
  }

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

      <button type='submit'>Submit</button>

      {message != null && <p>{message}</p>}
    </Form>
  )
}

API

useForm(schema)

Parameters

  • schema: The JSON schema to validate the data (recommended to use @sinclair/typebox).

Returns

  • handleUseForm(onSubmit): Function to be used with the onSubmit or onChange prop of the <Form /> component.
  • fetchState = 'idle': The current state of the form ('error' | 'success' | 'idle' | 'loading').
  • setFetchState: Function to update the fetchState.
  • message: Global message of the form (not specific to a property).
  • setMessage: Function to update the message.
  • errors: Object of errors:
    • Key: correspond to a property in the JSON Schema.
    • Value: array of ajv ErrorObject. The array will always have at least one element (never empty) in case of errors. If the value is undefined, it means there are no errors for this property.

💡 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