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

react-standalone-form

Package Overview
Dependencies
6
Maintainers
1
Versions
84
Issues
File Explorer

Advanced tools

react-standalone-form

Create React forms just with a pure JSX and let the react-standalone-form manage its state for you.

    1.5.7latest

Version published
Maintainers
1
Yearly downloads
12,186
increased by154.03%

Weekly downloads

Readme

Source

This package in version 2.0 has been renamed and its development is now continued as react-form-component.

Create React forms just with a pure JSX and let the react-standalone-form manage its state for you. A themeable form library based on Context API with a selection of user friendly inputs and wide customization abilities to match your design and functionality.

Install

yarn add react-standalone-form

Demo

Screenshot

See working example

Quick start example

  1. Wrap entitre app into <FormThemeProvider>. Optionally define a custom theme in theme prop.
  2. Use <Form> component anywhere in the app, declare all fields in a fields prop array.
  3. Use any from built-in input widgets or build custom inputs to compose a form. Give each input a name prop that corresponds with a name defined in a fields array of the ancestor <Form> component.
  4. Use <FormButton> to trigger a submit function that returns all field values formatted in a form of a simple javascript object.
// App.js import React from 'react' import ReactDOM from 'react-dom' import Form, { FormThemeProvider, Input, Select, FormButton, } from 'react-standalone-form' // Wrap entitre app into FormThemeProvider. const App = () => <FormThemeProvider> <div className='my-app'> <BasicFormExample /> </div> </FormThemeProvider> // Build a fully operational form. const BasicFormExample = () => <Form fields={['name', 'email', 'type']}> <Input name='name' label='User name' /> <Input name='email' type='email' label='E-mail' /> <Select name='type' label='Type of a user' options={['Viewer', 'Moderator', 'Admin']} /> <FormButton onClick={fields => console.log(fields)} >Save</FormButton> </Form> ReactDOM.render(<App />, document.querySelector('#app'))

Features

  • Built in form state management
  • Wide range of UI form components
  • Built in, customizable form validation system
  • Customizable theme and notification labels
  • Marking fields as required
  • Loading state support for asynchronous operations
  • Submit action triggered by a submit button or on each change with debounce
  • Optional reseting of all fields after a successful submit (show docs)
  • Data collected from forms is formatted well for API calls
  • Nested forms (possibility to put a form as a multiple fieldset of anorher form)
  • Built in, repleacable react-toastify notification plugin
  • Cross browser tested
  • SSR support
  • Easy way of creating custom inputs

Docs

Keywords

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