How To Add Props To Styled Components in React.js with TypeScript

Using React.js with TypeScript is not as straightforward for everyone when building a React application. I have quite some experience with TypeScript that I didn’t have significant issues (anymore 😅).

I’m pleased with Styled components. But typing them was a big question for me, until now! So I want to share them with you. 😉

If you haven’t TypeScript experience yet, please check my TypeScript beginner post. 👇

TypeScript For Beginners: _A practical way to learn TypeScript from scratch_levelup.gitconnected.com

---

TypeScript Interface and Enum

export enum sendState {
    sending = 'sending',
    recieved = 'recieved',
    error = 'error',
}
export interface iSendingState {
    state: sendState
}

Let’s clarify what I do here.

I want to add a prop state to my component, but the value's that I want to accept in it are: sending, received, and error`. That's what I do in my enum.

I define the property state in my interface, and I tell that I accept only the values of the sendState enum. So if I put in another value, my IDE and build system starts complaining.

TypeScript helps me write predictable code, as you can see.

---

Styled Component with typing

import { iSendingState, sendState } from './sending-state.type'

export const StatusMessage = styled.div<iSendingState>`
    display: inline-block;
    color: #fff;
    ${(props) => {
        if (props.state === sendState.sending) {
            return 'background-color: orange;'
        }
        if (props.state === sendState.recieved) {
            return 'background-color: green;'
        }
        if (props.state === sendState.error) {
            return 'background-color: red;'
        }
    }};
`

You usually define a styled-component like: export const StatusMessage = styled.div this. But now I add the iSendingState, which tells that my component accepts a state property.

Hopefully, this helps you further building an excellent application with predictable code 💪

---

Thanks!

I hope you learned something new or are inspired to create something new after reading this story! 🤗 If so, consider subscribing via email (scroll to the top of this page) or follow me here on Hashnode.

Did you know that you can create a Developer blog like this one, yourself? It's entirely for free. 👍💰🎉🥳🔥

If I left you with questions or something to say as a response, scroll down and type me a message. Please send me a DM on Twitter @DevByRayRay when you want to keep it private. My DM's are always open 😁