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

Write Predictable Code With styled-components in React.js

Dev By RayRay
Β·Mar 16, 2021Β·

2 min read

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

Subscribe to my newsletter and never miss my upcoming articles

Play this article

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!

hashnode-footer.png 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 😁

Did you find this article valuable?

Support Dev By RayRay by becoming a sponsor. Any amount is appreciated!

See recent sponsors |Β Learn more about Hashnode Sponsors
Β 
Share this

Impressum

I learn by writing, and write while learning more and more each day!πŸ‘Š A developer is never finished with learning, thinking that is the most stupid thing to do 🀣