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

👋 Introduction

🎉 Final Result 🎉

Setting Up the Form Skeleton

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:

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

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:

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();
  };

Source code:

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:

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.

Previously published .