How to Use Reactjs to Create a Twitter “What’s Happening” Bar Form

👋 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: usetheform + draft js (Rich Text Editor Framework for React).

🎉 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 formState is composed. To do so we will break down the single props of the formState by digging into the components where each prop is handled.

Let’s Start!

The first important “piece” of the formState we are going to analyze is the editor:

const formState= {
   ....,
   editor: { 
     editorState: {}, // the Draftjs editor state
     refEditor: {}, // a DOM ref to the Draftjs editor
     plainText: "abc ...etc"
   }
}

which is created and handled by the <WhatsHappeningBar /> component.

⚛️ WhatsHappeningBar

An object or an array of “usetheform” library is represented by the <Collection /> component, which creates within the form state the editor object already saw above.

The collection component named editor holds two props, the editorState and the plaintText. 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 “plainText” from the draftjs “editorState”.

Full code at: validator and reducer

For more details on how <Collection /> works, please refer to the Collection docs.

The second “piece” within the formState we will look at is the postPrivacy:

const formState= {
   ....,
   postPrivacy: "0", // possible values "0", "1", "2"
}

which is created and handled by the <PrivacyPicker /> component.

⚛️ PrivacyPicker

For sake of simplicity, what is shown below is a basic implementation of the <PrivacyPicker /> component made up by three input radios.

The <Input type=“radio” /> component of “usetheform” creates a piece of state within the formState named “postPrivacy”, which holds the privacy value picked by the user.

As you can see the checked prop is applied only on the first Input, it means that the formState contains the postPrivacy set by default to 0.

Full implementation available at: PrivacyPicker component

Another component worthy to be mentioned is the <UploadGif /> which creates and handles the following “piece” of formState:

const formState= {
   ....,
   gif: { ...gifProps }
}

⚛️ UploadGif

The useField 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 formState:

const onGifClick = (gif, e) => {
    e.preventDefault();
    setValue(gif); // pushing into the formState
    toggleGifGrid();
  };

More details about useField at: useField doc

Source code: <UploadGif />

The last, but not least, component we will look at is the <CharacterCounter/> component.

⚛️ CharacterCounter

The CharacterCounter component counts the characters typed by the user. What it needs in order to count them is the plainText prop within the editor which is extracted by the useSelector hook and passed into the utils function getProgressRingBarProps to get the props needed to the ProgressRingBar UI component.

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 usetheform 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.

I hope you enjoyed reading the article. Thanks 🙏🏻.

Previously published here.