👋 Introduction Forms allow users to enter data, which is generally sent to a web server for processing and storage. Anytime a Tweet is posted all the data entered into the Twitter form, such as: images, videos, plain text, links, emoji, …etc, are sent to a Twitter backend service which processes and stores the tweet. At the end of the tutorial we will obtain the following final result by leveraging two libraries: + (Rich Text Editor Framework for React). usetheform draft js 🎉 Final Result 🎉 Let’s dig deeper into code implementation. Setting Up the Form Skeleton In React, we can declaratively describe what the Form UI should look as following: The expected output at form submission is: The next step is to analyze how the above is composed. To do so we will break down the single props of the by digging into the components where each prop is handled. formState formState Let’s Start! The first important “piece” of the we are going to analyze is the : formState editor formState= { ...., : { : {}, refEditor: {}, plainText: } } const editor editorState // the Draftjs editor state // a DOM ref to the Draftjs editor "abc ...etc" which is created and handled by the component. <WhatsHappeningBar /> ⚛️ WhatsHappeningBar An object or an array of library is represented by the component, which creates within the form state the object already saw above. “usetheform” <Collection /> editor The collection component named holds two props, the and the . It also applies a validation function which validates the form state based on the editor’s text length and a reducer function which extracts the from the draftjs . editor editorState plaintText “plainText” “editorState” Full code at: and validator reducer For more details on how works, please refer to the . <Collection /> Collection docs The second within the we will look at is the “piece” formState postPrivacy: formState= { ...., : , } const postPrivacy "0" // possible values "0", "1", "2" which is created and handled by the component. <PrivacyPicker /> ⚛️ PrivacyPicker For sake of simplicity, what is shown below is a basic implementation of the component made up by three input radios. <PrivacyPicker /> The component of creates a piece of state within the named , which holds the privacy value picked by the user. <Input type=“radio” /> “usetheform” formState “postPrivacy” As you can see the prop is applied only on the first Input, it means that the contains the set by default to 0. checked formState postPrivacy Full implementation available at: PrivacyPicker component Another component worthy to be mentioned is the which creates and handles the following “piece” of : <UploadGif /> formState formState= { ...., : { ...gifProps } } const gif ⚛️ UploadGif The hook allows to create a custom input primitive, so when a user picks any gif image a callback function is invoked and the gif object is pushed into the : useField formState onGifClick = { e.preventDefault(); setValue(gif); toggleGifGrid(); }; const ( ) => gif, e // pushing into the formState More details about useField at: useField doc Source code: <UploadGif /> The last, but not least, component we will look at is the component. <CharacterCounter/> ⚛️ CharacterCounter The component counts the characters typed by the user. What it needs in order to count them is the prop within the which is extracted by the hook and passed into the utils function to get the props needed to the UI component. CharacterCounter plainText editor useSelector getProgressRingBarProps ProgressRingBar ProgressRingBar implementation available at: ProgressRingBar code More details about useSelector available at: useSelector doc Conclusion Semantically writing HTML forms is not difficult but handling complex form states such as nested collections and validating fields might easly turn into a nightmare. Using a library as which is simple to be integrated with others existing libraries, enables fields validations along with an easy way to deal with nested collections (arrays, objects) makes the forms development much easier. usetheform I hope you enjoyed reading the article. Thanks 🙏🏻. Previously published here .
