Next.js Discord

Discord Forum

How to create global reusable components?

Unanswered
Atlantic menhaden posted this in #help-forum
Open in Discord
Atlantic menhadenOP
What do you guys think about this component, is it wrong to do it like this? i just want something reusable that i can use on more places and dont have to make a lot of changes to.
import styles from "./Dividers.module.css"

export function Divider({ className, width, height, color }) {
        const dynamicStyles = {
            width: width,
            height: height,
            backgroundColor: color
        };
    return (
        <div className={`${styles.divider} ${className}`} style={dynamicStyles}/>
    );
}

It works fine only if i dont "use client" then i can override styles, they will be the same as i defined them here at the root component

9 Replies

@joulev the component looks good to me, nothing wrong with that
Atlantic menhadenOP
but is that something a pro would use? is there a beter way?
is this how you pass props to component?
joulev
this is a component that works well when imported to both client components and server components. It is a UI component that has a built-in styling and whose styling can be extended. So it is a good component
@Atlantic menhaden is this how you pass props to component?
joulev
about passing props... normally, these UI components would allow all props from the HTML element under it. So in your code I would rewrite it as
import styles from "./Dividers.module.css"

export const Divider = forwardRef(function Divider({ className, ...props }, ref) {
  return (
    <div className={clsx(styles.divider, className)} {...props} ref={ref} />
  )
});

then use it as if Divider is div:
<Divider id="blah" style={{ width: 1, height: 2 }} />
if you want to simply the props to pass width and height and color, then
import styles from "./Dividers.module.css"

export const Divider = forwardRef(function Divider({ className, width, height, color, style ...props }, ref) {
  const resolvedStyle = {
    width,
    height,
    backgroundColor: color,
    ...style,
  };
  return (
    <div className={clsx(styles.divider, className)} style={style} {...props} ref={ref} />
  )
});
another thing: what if i want to have HorizontalDivider, VerticalDivider and maybe some other how would you go about that? should i make a base divider and then make other dividers inherit it, or just make all from scratch? similar to how could i make buttons all similar but still different (primary, secondary etc). should i just pass props to it or what is best approach?