React Component Library

  • Lack of consistency: like different colors, fonts, so UI styles changes. UI elements could be different depending of component.
  • UX challenges: E.g. if confirm button is blue on one page but then the cancel is blue on the next it can cause confusion.

Storybook to the Rescue!

How to Build Your Own Library

  • Keep it simple. Sometimes being limiting/restricting on props, might mean you have to add a lot of conditionals to keep up with all the use cases. So being open at the beggining can save you a lot of upfront time. Start with less opinionated component and build from there if really need it. Make your components more flexible. See my last blog for more info on flexible components.
  • Unfinished components are ok. Build from the feedback of your users.
  • Have accesibility in mind.
  • Read Atomic Design Book to increase your knowledge and build a solid library with advanced components families.
  • Don’t forget the component checklist you can use as you build your library.
  • Check out the presentation video here.
  • Read this article.

--

--

--

Social Entrepreneur and Software Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Service Workers in JS and offline reading

JavaScript ‘this’ a quick example — regular, arrow functions and methods

We all struggle with `this`

Create an ADVANCED JavaScript Wheel Image Carousel

Make an Image Float with JavaScript, HTML, and CSS

Where to hide your cookie?

JavaScript ShortHand

To hell with nuance, arrow function all the things

React Custom hook for window size “useWindowSize()”

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Felipe Bohorquez

Felipe Bohorquez

Social Entrepreneur and Software Engineer

More from Medium

Hooks In React

JBook, favicons and more CSS

Server-side search in React-table

Reusable components in REACT