Socket
Socket
Sign inDemoInstall

formative

Package Overview
Dependencies
4
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

formative


Version published
Weekly downloads
1.1K
increased by26.06%
Maintainers
1
Install size
53.5 MB
Created
Weekly downloads
 

Readme

Source

Formative

Type Safe Forms with React Hooks

(A work in progress - All contributions welcome!)

Getting Started

Install the package with you favorite package manager

npm install --save formative

or

yarn add formative

Import into your React component

import React from 'react';
import { useForm } from 'formative';

...

function MyReactFormComponent() {
  const {
    inputHandlerProps,
    useHandleSubmit
  } = useForm<Form>(form, schema);

  const handleSubmit = useHandleSubmit(() => {
    // Async form submission goes here!
    alert('submitted');
  });

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" {...inputHandlerProps} />
      <input type="password" name="password" {...inputHandlerProps} />
      <button type="submit">Submit</button>
    </form>
  );
}

Check out a working example here

Validation

Formative is opinionated when it comes to validation. useForm<Form>(form, schema) requires 3 things, a Typescript Form type, the initial form object instance, and a Yup schema. All validation is defined by the Yup schema definition that you provide to useForm.

Note: Currently we only support synchronous Yup validation, async support coming soon.

Submission

The useForm hook returns a useHandleSubmit hook that takes your submission callback function. This callback can contain your async form submission logic.

Type Safety

By providing the Typescript type definition to the useForm<MyFormType> hook we can provide all the wonders of the Typescript feedback loop and other type safety benefits.

Keywords

FAQs

Last updated on 10 Oct 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc