A neat way of building React components

I'll explain one of the best way (in my opinion) to keep your React components clean and reusable. I'll be using TypeScript for this and we'll start with a simple Button component: type Props = { children: string } function Button({ children }: Pr...

h.telmo.is4 min read

#tutorial #typescript #reactjs

Responses5

Markdown supported · ⌘↵ to post

SŠ

Saša Šijak

Feb 11, 2021

For me it is much cleaner to do it like this:

size: "sm" | "md" | "lg"

That way you do not have to import Sizes type everywhere and type it in each prop and you still get type check

The only reason I would disagree with this is, lets picture you're using <Button size="md"> is hundreds of places in your app. Now, you get a requirement to change it from md to medium.

With the enum you only need to change it in the Button component itself, you don't need to go over every single scenario where you're using it and change to medium.

Surjith S M

Freelance Web & UX Designer

Feb 11, 2021

I didn’t understand.

Apart from using Typescript? What’s the benefit? Are you suggesting to use typescript for better components or to use enum? If its not typescript, how do we go about it.

Am I missing something?

Telmo Goncalves

Developer who can design.

Feb 11, 2021

I'm using enum because of TypeScript though. If you're not using TS you can do:

export const sizes = {
  MD: 'md',
  // etc
}

The benefit is that you'll have the size names or button types all in the same place. If you need to change from lg to large you only need to change it in one place.

Surjith S M

Freelance Web & UX Designer

Feb 11, 2021

Telmo Goncalves Oh Okay. Got it now. Thanks for clarifying.

Search Hashnode

A neat way of building React components

Responses5