10 Ways to Style React Components in 2020
1.React Typewriter Hook
Use react hooks for typing effect easily
Example
View example at codesandbox
2. React Boiler Plate
CodePen Development Style for React in VS Code
3.Responsive styles with atomic CSS declarations
Responsively is created with the intention to easily adjust components with a responsive, mobile-first approach in mind; it may resemble single purpose classes (e.g. .mt-0, or .mt-0–mobile).
This library plays nicely with libraries such 👩🎤 Emotion and 💅 Styled Components since the code output is string.
4.React Styleguidist
Isolated React component development environment with a living style guide
React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that you can share with your team. It lists component propTypes and shows live, editable usage examples based on Markdown files.
Live demo: https://react-styleguidist.js.org/examples/basic/
View on Github
5.Animate pixel art and get CSS
Did you know that you can create pixel art using CSS?
Pixel Art to CSS is an online editor that helps you with that task.
Combining the power of both box-shadow and keyframes CSS properties, you will get CSS code ready to use in your site.
Furthermore, you can download or share your work in different formats such as a static image, animated GIF or sprite like image.
Live demo: https://www.pixelartcss.com/
6.Style It
Style It is a component for writing plaintext CSS in JavaScript apps. Use the same familiar CSS syntax you already know and love – now inside of your components.
7.React Live
A flexible playground for live editing React components
React Live brings you the ability to render React components with editable source code and live preview. It supports server-side rendering and comes in a tiny bundle.
The library is structured modularly and lets you style and compose its components freely.
Download Details:
Live Demo: https://react-live.netlify.com/
Download Link: https://github.com/FormidableLabs/react-live/archive/master.zip
Official Website: https://github.com/FormidableLabs/react-live
8.React OnVisible component
React component that applies a css class to the container when the element is in the browser viewport
This is a component that applies the css class visible to the container when the element becomes by default more than 50% visible in the browser viewport.
It only attaches to browser events on the client, so is also safe to use for server rendering.
Viewport visibility is calculated by listening to a debounced window scroll event (10ms), and once the element has been found to be visible, no further changes are applied unless the bounce prop is set to true.
Live example: https://dazld.github.io/react-on-visible/demo/
Official Website: https://github.com/dazld/react-on-visible
9.A minimalist composable component inspired by React
A Stable, Minimal, Auditable, Build-Tool-Free, Low Profile Component Framework
Official Website: https://github.com/optoolco/tonic
10.React Rebass Grid
Responsive React grid system built with styled-components and styled-system.
Responsive React grid system built with styled-system, with support for styled-components and emotion (previously called grid-styled)
Download Details:
Download Link: https://github.com/rebassjs/grid/archive/master.zip
Official Website: https://github.com/rebassjs/grid
#reactjs #javascript
