TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

React Forms: form rendering and validation for React

2 pointsby andreypoppabout 11 years ago

1 comment

andreypoppabout 11 years ago
I want to highlight few points in the design of the library.<p>Responsibility is divided between form schemas, form components and input components:<p>* Form schema provides a high-level description of a form: what&#x27;s shape of the data it handles, how to validate user input, what labels to render for each field and so on.<p>* Form components are React components which interpret form schemas to build UI and setup dataflow between different parts of the form.<p>* Input components handle user input, they should adhere to &quot;value&#x2F;onChange&quot; contract and so are reusable outside of React Forms context.<p>We tried to make every aspect of React Forms to be extendable and replaceable: form schemas can hold additional metadata, custom form and input components can be created. There&#x27;s a documentation page (<a href="http://prometheusresearch.github.io/react-forms/documentation/customizations.html" rel="nofollow">http:&#x2F;&#x2F;prometheusresearch.github.io&#x2F;react-forms&#x2F;documentatio...</a>) which tries to put the light on how to extend&#x2F;customize React Forms components.<p>All of the form components except of the top level Form component are stateless. Form state (value and validation state) is propagated to form fields as lenses to the entire form state. On user input a corresponding form field produces a new form value and validation state (via lenses, so this is opaque to the form field itself) and notifies top level form component.<p>Form state is immutable (on each change a new value is produced) and so such functionality as undo&#x2F;redo can be implemented easily. See the example (<a href="http://prometheusresearch.github.io/react-forms/examples/undo.html" rel="nofollow">http:&#x2F;&#x2F;prometheusresearch.github.io&#x2F;react-forms&#x2F;examples&#x2F;und...</a>) which implements basic undo&#x2F;redo in about 40LOC.