How To Add Props To Styled Components in React.js with TypeScript
Write Predictable Code With styled-components in React.js
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 ๐