robinweser / React Controlled Form
Licence: mit
Flexible, Modular & Controlled Forms for React and Redux
Stars: ✭ 121
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Controlled Form
Redux Form
A Higher Order Component using react-redux to keep form state in a Redux store
Stars: ✭ 12,597 (+10310.74%)
Mutual labels: form-validation, form, forms, redux-form
FrontendForms
A module for ProcessWire CMS to create and validate forms on the frontend easily using the Valitron library.
Stars: ✭ 0 (-100%)
Mutual labels: forms, form, form-validation
Final Form
🏁 Framework agnostic, high performance, subscription-based form state management
Stars: ✭ 2,787 (+2203.31%)
Mutual labels: form-validation, form, forms
Composable Form
Build type-safe composable forms in Elm
Stars: ✭ 179 (+47.93%)
Mutual labels: form-validation, form, forms
Form bloc
🔥 Dart and Flutter Package 🔥 Easy Form State Management using BLoC pattern 🔥 Wizard/stepper forms, asynchronous validation, dynamic and conditional fields, submission progress, serialization and more! 🔥
Stars: ✭ 239 (+97.52%)
Mutual labels: form-validation, form, forms
form-data-json
A zero dependency, cross browser library to easily get or set/manipulate form input values as/from a json object.
Stars: ✭ 37 (-69.42%)
Mutual labels: forms, form, form-validation
Jafar
🌟!(Just another form application renderer)
Stars: ✭ 107 (-11.57%)
Mutual labels: form-validation, form, forms
vue-use-form
✅ A Vue.js composition API function to validate forms
Stars: ✭ 97 (-19.83%)
Mutual labels: forms, form, form-validation
ember-validity-modifier
Ember Octane addon to add custom validity (form validation) to form fields
Stars: ✭ 28 (-76.86%)
Mutual labels: forms, form, form-validation
React Final Form
🏁 High performance subscription-based form state management for React
Stars: ✭ 6,781 (+5504.13%)
Mutual labels: form-validation, form, forms
react-cool-form
😎 📋 React hooks for forms state and validation, less code more performant.
Stars: ✭ 246 (+103.31%)
Mutual labels: forms, form, form-validation
React Hook Form
📋 React Hooks for form state management and validation (Web + React Native)
Stars: ✭ 24,831 (+20421.49%)
Mutual labels: form-validation, form, forms
Usetheform
React library for composing declarative forms, manage their state, handling their validation and much more.
Stars: ✭ 40 (-66.94%)
Mutual labels: form-validation, form, forms
Awesomevalidation
Android validation library which helps developer boil down the tedious work to three easy steps.
Stars: ✭ 1,093 (+803.31%)
Mutual labels: form, forms
Normform
Normform: A tiny CSS plugin to make your web forms beautiful again
Stars: ✭ 78 (-35.54%)
Mutual labels: form, forms
Formik Alicante
Formik slides & demos from React Alicante
Stars: ✭ 47 (-61.16%)
Mutual labels: form, forms
Controlled Forms
react-controlled-form aims to simplify form management with React and Redux.
It ships functional APIs to create your very own form fields and is built with flexibility and customization in mind.
It allows you to bring your own components.
You do not have to struggle with predefined input components ever again!
Installation
yarn add react-controlled-form react react-redux redux
Controlled Forms requires
react-redux
to be installed in your project. Therefore,react
andredux
must also be installed.
Benefits
- simple functional API
- Redux-driven state management
- full flexibility
- custom form fields
- reactive forms
The Gist
import { Form, Field } from 'react-controlled-form'
function Input({
value,
updateField,
isRequired,
isValid
}) {
// we could also do validation here and
// update isValid in updateField respectively
function onChange(e) {
updateField({ value: e.target.value })
}
return (
<input
value={value}
required={isRequired}
disabled={!isEnabled}
onChange={onChange}
/>
)
}
function UserForm({
data
}) {
const onSubmit = () => console.log("Submitted: ", data)
return (
<form onSubmit={onSubmit}>
<Field fieldId="firstname" render={Input} />
<Field fieldId="lastname" render={Input} />
<button type="submit">Submit</button>
</form>
)
}
export default () => (
<Form formId="user" render={UserForm} />
)
Documentation
Examples
- Simple Example (demo | source)
- Validation Example (demo | source)
- Third-Party Component Example (demo | source)
License
react-controlled-form is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann and all the great contributors.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].