React Styled-Components: A smart way (Also React Native)

Vilva Athiban P B

3 min readNov 19, 2019

--

Simple Tricks and Tips to use Styled-Components in a better way.

1. Props at the component level

In styled-components, we can get access to the props of the component and create dynamic styles as follows.

Vilva Athiban P B

Written by Vilva Athiban P B

6+ years of Experience in React-Redux / NodeJS / GraphQL / TypeScript. https://vilvaathiban.com

More from Vilva Athiban P B

Vilva Athiban P B

NodeJS / ReactJS: Payment Integration with PayUMoney

We had to build a Web app in NodeJS/Express + React/Redux + MongoDB. In the app, we planned to integrate multiple payment options like…

5 min readJan 18, 2018

--

Vilva Athiban P B

NextJS — Convert Client-Side React app to Server-side Rendering in 5 mins

NextJS may be the new Sensation in the UI world. It is a bunch of Web tools that let us start building an application in a very short span…

5 min readSep 27, 2018

--

Vilva Athiban P B

JavaScript Animations — Element.animate vs requestAnimationFrame vs Conventional Animation

Animations have become an inseparable part of the web. Though it has a positive effect on the UX, it undeniably affects the performance…

2 min readSep 16, 2018

--

Vilva Athiban P B

JSON.parse() — Watch your Tail.

With JavaScript Release 1.8.5, we are in a situation to watch our tails when we use JSON.parse(). The following feature may not be a game…

2 min readSep 7, 2018

--

See all from Vilva Athiban P B

Recommended from Medium

Christopher Clemmons
in
Level Up Coding

9 Interview Questions Every Senior React Developer Should Know

As a React developer, you’ll eventually experience the urge to take that next large step into a senior role. Many of us stay stuck as a…

8 min readJan 4

--

Harry Lau

Setting up React Native Mobile with React Native CLI in 2023

React Native CLI with MMKV, React Navigation, Reanimated and Gesture Handler

8 min readMar 22

--

Lists

Stories to Help You Grow as a Software Developer

19 stories60 saves

Reed Barger
in
Web Dev Hero

7 React Projects for Beginners in 2023 (+ Code)

You’re ready to start making simple projects with React, but you don’t know what to make. Where should you start?

6 min readJan 11

--

shrey vijayvargiya
in
Geek Culture

50 React Native Interview Questions

Let’s prepare for React Native interview after 50 Frontend interview questions.

3 min readFeb 12

--

Asim Zaidi

Advanced Data Fetching Technique in React for Senior Engineers

As an engineer working with React, it’s important to have a solid understanding of the various ways to fetch and manage data in your…

4 min readJan 27

--

Al - @naucode
in
JavaScript in Plain English

5 React Design Patterns You Should Know

Are you tired of writing the same code over and over again? Want to take your React skills to the next level? Discover the power of HOCs…

4 min readJan 27

--

See more recommendations

Help
Status
Writers
Blog
Careers
Privacy
Terms
About
Text to speech