Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

formact

Package Overview
Dependencies
0
Maintainers
1
Versions
39
Issues
File Explorer

Advanced tools

formact

A zero dependency and design agnostic Form library for React.

    4.0.4latest

Version published
Maintainers
1
Yearly downloads
3,061
increased by47.02%

Weekly downloads

Changelog

Source

Formact 4.0.4

What's Changed

  • Add keywords by @diogoperillo in https://github.com/diogoperillo/formact/pull/34

Full Changelog: https://github.com/diogoperillo/formact/compare/4.0.3...4.0.4

Readme

Source

Formact codecov

A zero dependency and design agnostic Form library for React.

Installation

In your terminal, add it to the project by running:

npm install --save formact

Usage

Creating fields

As formact is design agnostic, you'll need to create your own fields. You can it by using the hook useField in a function component.

This how a TextField would look like:
import { useField, FieldProps } from 'formact' export default function TextField(props: FieldProps & { label: string }) { const field = useField<string>(props) return ( <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', margin: '5px 10px', }}> <div> <label htmlFor={props.name}>{props.label}</label> </div> <input // @ts-ignore data-testid={`field-${props.name}`} name={props.name} id={props.name} type={props.type} onBlur={(e) => { // call field.onBlur to make sure the field is dirty field.onBlur(e) }} // use field value value={field.fieldValue || ''} // update the field value onChange={(e) => field.update(e.target.value)} onKeyDown={(e) => { // Submit the form when pressing enter if (e.key === 'Enter') { field.submit() } }} /> {field.showError ? ( <div data-testid={`field-error-${props.name}`} style={{ color: 'red' }}> {field.errorMessage} </div> ) : null} </div> ) }
A submit button:
export default function SubmitButton() { const form = useForm() return ( <button data-testid="submit-button" type="submit" disabled={!form.valid} onClick={form.submit}> {form.submitting ? 'Submitting...' : 'Submit'} </button> ) }

Using the fields

These fields become really powerful when wrapped in a Form component.

import Form from "formact" <Form onChange=(console.log) onSubmit={console.log}> <TextField name="country" /> <SubmitButton /> </Form>

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

Keywords

FAQs

What is formact?

A zero dependency and design agnostic Form library for React.

Is formact popular?

The npm package formact receives a total of 30 weekly downloads. As such, formact popularity was classified as not popular.

Is formact well maintained?

We found that formact demonstrated a healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 17 May 2022
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc