DEV Community

Takane Ichinose
Takane Ichinose

Posted on

Reaction Social Media Card with ReactJS

Reaction Social Media Card with ReactJS

Description

This example program is created using ReactJS, to practice my skills in how to use it. I highly implemented "React hooks" to create this thing.

The main feature of this sample program is when you hover on the "React" button, the reaction pop-up will appear, then you could select your reaction. Although this will not work even though you click it. I just created this for fun, and to practice.

You may also click on the "Comment" button. If you do so, the comment section will appear. Although, it is just for display. Even if you tried to input your comment, no one would receive it.

A added few seconds of throttle in loading the data, to simulate how page load works in real world.

The dark mode of this sample program runs by changing your system setting to light or dark mode. All depends on your preferences.

The behavior of the functionality of this example program is based on Facebook (on web).

Resources

  1. JavaScript library: ReactJS
  2. Fonts: Open Sans (I just used the one from the 'Assets')
  3. Image (For avatar): いらすとや
  4. Icons: Font Awesome
  5. SVG: Inkscape

Discussion (0)