DEV Community

loading...

Discussion on: Building highly reusable React.js components using compound pattern

Collapse
ronca85 profile image
ronca85

i see many problems with this approach. here's just a few:

  1. your approach completely ignores accessibility principles. everything is a div, why?
  2. you wrote a lot of code to make a very simple element. why not use a native element?
  3. i don't see how this is reusable. i can use this only in react, right? the styles are also baked into the component so no way for me to use this outside of react.
Collapse
jrgarciadev profile image
Junior Garcia Author

Hi ronca85, I will answer you with pleasure:

  1. In order to save lines of code I was forced not to focus on the accessibility side, I leave you an example with which you can guide you to add the accessibility points
    github.com/Semantic-Org/Semantic-U..., github.com/Semantic-Org/Semantic-U.... I used div because is more comfortable to build a custom select component, you can see any "Select" component of famous react components libraries, in fact, this tutorial is base on "Select" component made by geist-ui github.com/geist-org/react/blob/ma... currently used by Vercel.

  2. Is not a simple component, I know you can use and HTML tag but is not common use it because is more complex to customize, you can see famous React libraries and they all use custom code to do it, for example, Material UIhttps://github.com/mui-org/material-ui/tree/next/packages/material-ui/src/Select

  3. Is totally reusable in React, you can't use this code in another framework/library without adapt because of it's based on the React API such as useMemo, useCallback, etc...

And remember the main goal of this tutorial is to learn about the Compound Pattern in React so that you can use it in any component.