styled-components - freeCodeCamp.org

How to Use Styled Components in Your React Apps

Kedar Makode — Thu, 04 May 2023 14:19:57 +0000

Styled-components is a library that allows you to write CSS in JS while building custom components in Reactjs.

There are multiple options you can go with to style a React application. But the CSS in JS technique is good approach, where you write the CSS code right in the JavaScript file. Styled-components takes this approach.

In this article, you will learn how to write CSS in JS.

Prerequisites

Before we go ahead with styled components, you should be familiar with React and CSS.

How to Create a Basic React App

Before getting started with styled components, let's start by creating a React app using create-react-app .

npx create-react-app APP_NAME

If you are not familiar with create-react-app, you can check here for more information.

Once you React boiler plate is set, remove all files from src folder except index.js and app.js.

This is how your files should look like when you are done with the above steps. Now it's time to clean up app.js and index.js. Now index.js and app.js will have some default boiler code. We need to remove unnecessary stuff from these files. After removing unnecessary stuff you app.js and index.js should look like code below in respective files.

App.js

function App() {
    return(
        <div>
            App
        div>
    )
}

index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

const root = ReactDom.createRoot(document.getElementById('root'))
root.render(
    <>
        <App />
    
)

Now open the command line or press ctrl + (backtick) to open it and typenpm start` to start your React app.

Once your app is running successfully, stop your server using ctrl + c and install styled-components. The command to install styled-components is below:

npm install styled-components

Let's Style Our First Component

We will create a basic setup to help you learn styled components. In app.js, create a heading using an

tag, a paragraph using a tag and a button using the tag.`App.js function App() { return ( Styled Components Cillum culpa deserunt enim et eiusmod quis proident consequat tempor ipsum sunt esse. ); } export default App;`Before we style our component, we need to import styled-components into our `app.js` file:`import styled from 'styled-components' function App() { return ( Styled Components Cillum culpa deserunt enim et eiusmod quis proident consequat tempor ipsum sunt esse. ); } export default App;`Now we will create our custom component called H1 and use it instead of the tag with custom styling.const H1 = styled.h1` color: red; font-size: 4rem; ` First we need give a custom name of our choice. Then we'll start with `styled.` and wrap the style in backticks. Now when we use this custom component it will have the property with styling.import styled from 'styled-components' const H1 = styled.h1` color: red; font-size: 4rem; ` function App() { return ( Styled Components Cillum culpa deserunt enim et eiusmod quis proident consequat tempor ipsum sunt esse. ); } export default App;Voilà! Here we have our first custom styled component.NOTE: Always use uppercase letters to start your custom component name in React as it is React convention.Now if you inspect the page, you will see some gibberish class name. Styled components does this to avoid naming conflicts.Now let's style our button component:const DefaultButton = styled.button` background-color: #645cfc; border: none; padding: 10px; color: white; ` DefaultButton is our custom component name. After we style it, we can give it any HTML tag we desire so that this custom component will have that tag.Now we will use DefaultButton that we created above as our custom component in React.js – but behind the scenes it will be the button tag from HTML as we mentioned in styling using styled components.import styled from 'styled-components' const H1 = styled.h1` color: red; ` const DefaultButton = styled.button` background-color: #645cfc; border: none; padding: 10px; color: white; ` function App() { return ( Styled Components Cillum culpa deserunt enim et eiusmod quis proident consequat tempor ipsum sunt esse. Click ME! ); } export default App;We can also keep our files clean by making a different file for each different component in styled components. Yes! We can do that in here.We will make new folder called `components` in `src` and create the files `Title.js` and `Buttons.js` to separate the styling for title and buttons.We will copy the H1 style and paste it into `Title.js` and copy DefaultButton style and paste it in `Buttons.js`.In `Title.js` we will export it as default. But in `Buttons.js` we will name the export because we will create multiple button styles in here.When we are exporting a component as default, then its import is a regular import as shown below:`import H1 from './components/Title'`But when the export is a named export (you can see the named export in Button.js in the above image), then while importing that component we have to wrap the component name in curly braces ({}) as shown below:`import {DefaultButton} from './components/Buttons'`Now our `App.js` looks like this:`import H1 from './components/Title' import {DefaultButton} from './components/Buttons' function App() { return ( Styled Components Cillum culpa deserunt enim et eiusmod quis proident consequat tempor ipsum sunt esse. Click ME! ); } export default App;`Props in Styled ComponentsNow for those of you who know props from React, you're in luck – pops in styled components work similarly. If you don't know what props are, don't worry – I'll introduce them here.Now, we learned to create custom components in styled components. Those custom components can have attributes which we can access in components. It might be a bit confusing to beginners but let's see it in code:`import H1 from './components/Title' import {DefaultButton} from './components/Buttons' function App() { return ( Styled Components Cillum culpa deserunt enim et eiusmod quis proident consequat tempor ipsum sunt esse. Click ME! Click ME! ); } export default App;`In the above code, I created one more Default button. But can you see difference between those 2 buttons. Yes! We have something written after DefaultButton, which is `red`. It's called an attribute.Now by accessing the attribute in DefaultButton we can change the styling based on these attributes. Let's do it!import styled from 'styled-components' export const DefaultButton = styled.button` background-color: ${(props) => (props.red && 'red') || '#645cfc'}; border: none; padding: 10px; color: white; ` We are already in a template literal (backticks). So we can write JavaScript inside it. We used the dollar ($) sign and curly braces to write the JavaScript. In those curly braces we declared an arrow function which has a props parameter which can access attributes of custom components.So the arrow function says that if the red attribute is given, then the background-color should be red or else it should be a blueberry color.`App.jsimport H1 from './components/Title' import {DefaultButton} from './components/Buttons' function App() { return ( Styled Components Cillum culpa deserunt enim et eiusmod quis proident consequat tempor ipsum sunt esse. Click ME! Click ME! ); } export default App;`We can also destructure props by attribute name. Above, we gave DefaultButton an attribute of red and we accessed it with `props.red`.Instead of accessing it with `props.red` we could destructure the prop with {} and the attribute name. Refer to the below code to get a good understanding.import styled from 'styled-components' export const DefaultButton = styled.button` background-color: ${({red}) => (red && 'red') || '#645cfc'}; border: none; padding: 10px; color: white; ` Now we can access props directly as `red` rather that `props.red`.How to Extend Styles in Styled ComponentsWe know how to write custom styled components. But what if we want to use the DefaultButtons style that instead has 100% width of the button? We can do that using extended styles in styled components.It's simple: we just have to create a new component in `Buttons.js` . And we'll use `styled.`, instead of `styled(DefaultButton)`. Now our new component will have added the styles of DefaultButton and some of new styles of its own.export const ExtendedButton = styled(DefaultButton)` display: block; width: 100vw; `App.jsimport H1 from './components/Title' import {DefaultButton, ExtendedButton} from './components/Buttons' function App() { return ( Styled Components Cillum culpa deserunt enim et eiusmod quis proident consequat tempor ipsum sunt esse. Click ME! Click ME! ); } export default App;How to Nest Styles in Styled ComponentsWe can write more complex styles in React using one custom component. This will help you even more and make styling simple. Refer to the following code:import styled from 'styled-components' function App() { return ( Another heading Another para ); } const Wrapper = styled.div` h1{ text-align: center; color: violet; } p{ font-size: 40px; } button{ background-color: pink; padding: 4px 8px; border: none; } ` export default App;When we implement the wrapper component, all paragraph tags inside the wrapper will have a font-size of 40px and the button will have background color of pink, padding as mentioned, and no border. This will help you tremendously when writing your code.How to Extend React ComponentsWe can also extend React components using styled components. It is pretty similar to nesting styles. Here's an example:import React from 'react' import styled from 'styled-components' const Newcom = () => { return ( Heading 2 ) } const Wrapper = styled(Newcom)` h2{ color: green; text-align: center; } button{ padding: 4px 10px; background-color: violet; border: none; } ` export default WrapperWhen we write styles using styled components, we have to just extend React components like extending styles. When we're extending styles, we write the name of the extended style. Here we will write the name of the component to extend as shown in the above code.But still it's not working. If we inspect we will see our HTML but with no class. In React components there is no class. So you need to add props to the React component and console.log() those props.You will see our gibberish class name with the key:value pair, like className : gibberish-classname. So now using that we will destructure the props and give a className to the div of that component of className. Refer to the below example:import React from 'react' import styled from 'styled-components' const Newcom = ({className}) => { return ( Heading 2 ) } const Wrapper = styled(Newcom)` h2{ color: green; text-align: center; } button{ padding: 4px 10px; background-color: violet; border: none; } ` export default WrapperEven after using styled components for styling you can use global styling.Just remember that if your global styling and styled component styling are the same, React will pick the styled component styling.CSS VariablesRepeating the same color is annoying. What if I have red in many places and now I want all that red changed to blue? It is a time consuming task to do manually, one by one.Luckily, CSS variables come to our rescue. Now create an `index.css` file in the `src` folder. Import it in `index.js`.`import './index.css';`Now we will write some CSS variable in index.css which are global styles accessible from everywhere. The most interesting thing is that we can have access to CSS variables in styled component as well.`index.css:root{ --primary-color: #8F00FF }`Now `:root{}` is just like selecting `html{}` in CSS. But `:root{}` has more specificity than `html{}`. We can now use this variable in our styled component:const Wrapper = styled(Newcom)` h2{ color: green; text-align: center; } button{ padding: 4px 10px; background-color: var(--primary-color); border: none; } ` How to Add a ThemeNowadays, light themes and dark themes are pretty popular. We can do this easily in styles components.First we need to import ThemeProvider from styled components. Then we will wrap the whole app in ThemeProvider with the theme attribute in which we will provide our theme. Then we can toggled it with React.`import styled, {ThemeProvider} from 'styled-components' import Sample from "./components/Sample"; const baseTheme = { background: '#fff', color: '#222', } const darkTheme = { background: '#222', color: '#fff', } function App() { return ( This is sample paragraph ); }`Still, we don't get our dark theme. For that we need to add a new custom styled component. You can name it anything you want but, I'm gonna name it `Container`.In the container, we can access the theme and its properties and help the user change the background color and color of text. These are the only major things to switch in between dark and light mode.import styled, {ThemeProvider} from 'styled-components' import Sample from "./components/Sample"; const baseTheme = { background: '#fff', color: '#222', } const darkTheme = { background: '#222', color: '#fff', } const Container = styled.div` color: ${(props) => props.theme.color}; background-color: ${(props) => props.theme.background}; ` function App() { return ( This is sample paragraph ); }Take a look at our `Container`. We are accessing the theme and changing the color and background-color when the theme changes. And here you go, a simple way to have themes on your next project.Animation in Styled ComponentsAnimation is important in frontend development. We will learn to implement animation in styled components with an example.First we have to import keyframes from styled-components. Once that's done we will use it to create animations.import styled, {keyframes} from 'styled-components' const spinner = keyframes` to{ transform: rotate(360deg); } ` const Loading = styled.div` width: 6rem; height: 6rem; border: 5px solid #ccc; border-radius: 50%; border-top-color: black; animation: ${spinner} 0.6s linear infinite; ` export default LoadingIn the above code, we have spinner in which we declared the animation and spinner is the animation name. In loading, we are using that spinner animation name so that Loading will use that animation. In loading I have use a shorthand property to declare the animation.How to Use `as` in Styled ComponentsIf I have a button and I give it an `href` attribute which we use to link to another website, it will not work. This is because the `href` attribute belongs to the anchor tag.`import React from 'react' import {DefaultButton} from './components/Buttons' const App = () => { return ( Click ) } export default App`But in styles component using `as` we can make the given component act like an HTML tag provided as a value to `as`. Let's see it in action.`import React from 'react' import {DefaultButton} from './components/Buttons' const App = () => { return ( Click ) } export default App`Now DefaultButton is an anchor () tag. It will have text-decoration because in the default anchor tag it has text-decoration. But I am sure now you can work that out. When we click on our DefaultButton it will open Google.CSS and styled-componentsNow we can directly give styles to components using CSS as an object of the component called `css props` .`import React from 'react' import styled from 'styled-components' const App = () => { return ( Hello World!!! ) } export default App`But the above code won't work. Because we need to import styled-components/macro to activate the styling method which uses Babel. Check out the complete code below:`import React from 'react' import styled from 'styled-components/macro' const App = () => { return ( Hello World!!! ) } export default App`CSS Helper Functions in Styled ComponentsWe have learned a lot about styled components. But there are more efficient ways to tackle some problems – and one of them is using a CSS helper function.Suppose you want a DefaultButton and a large DefaultButton. Based on what we've learned up until now, we would say we should give large as a prop and change the styling based on that prop.But think about it – we need to make changes to multiple properties. So a CSS helper function comes to our rescue.App.jsimport React from 'react' import styled from 'styled-components/macro' import {DefaultButton} from './components/Buttons' const App = () => { return ( Hello Hello ) } export default AppButtons.jsimport styled, {css} from 'styled-components/macro' export const DefaultButton = styled.button` background-color: ${({red}) => (red && 'red') || '#645cfc'}; border: none; color: white; display: block; margin: 10px; ${({large}) => large? css` padding: 15px; font-weight: 800; ` : css` padding: 10px; font-weight: 400; `} `Take a look at the above code. First we passed a prop as large from app.js in DefaultButton component. Then using the ternary operator in Button.js we styled the component. It says that if `large` is given a prop, implement the first styling or else implement the second styling. This follows the DRY (Don't Repeat Yourself) principle.Default Attributes (attrs) in Styled ComponentsWe have attributes on some elements in HTML. For example on button, we have type="submit" or type="button". But every time we have to set them manually.import React from 'react' import styled from 'styled-components' const Button = styled.button` border: none; padding: 5px 10px; background-color: #87CD11; margin: 10px; ` const App = () => { return ( ) } export default AppHere, default attributes come in handy. We can pass an object or function to them. But if we pass objects to attributes, then they will be static. To have dynamic control, we will pass a function to the attribute.import React from 'react' import styled from 'styled-components' const Button = styled.button.attrs((props) => { return {type: props.type || "button"} })` border: none; padding: 5px 10px; background-color: #87CD11; margin: 10px; ` const App = () => { return ( ) } export default AppIn the above code, we set attributes to `button`. This says that if the type is given then it will set that type to the given props – or if no props are given it will set it to button by default.As a challenge, you can go ahead and use a CSS helper function to set a different style based on the type of button.Wrapping UpI hope you now understand how to use Styled Components in your projects. Do let me know what you think. Thank you for reading!You can follow me on:Twitter LinkedIn Instagram

React + WebSockets Project – Build a Real-Time Order Book Application

Mihail Gaberov — Tue, 19 Apr 2022 17:15:27 +0000

In this tutorial, we will see how to build an Order Book web application, that we'll use to display real-time cryptocurrency info.

We will use React with Typescript for creating the UI, Redux for managing the application state, and styled-components for applying the styling. And last, but not least, we'll use WebSockets for fetching the data feeds.

GitHub Repo

💡 If you want to skip the reading, here 💁 is the GitHub repository with a detailed README 🙌, and here you can see the live demo.

What is an Order Book?

An Order Book is an application that usually displays some kind of information related to buying and selling stuff.

💡 The most common use case is showing data for various assets, such as stocks, bonds, currencies, and even cryptocurrencies.

Why Would I Need an Order Book?

In practice, Order Books are used by traders to watch the fluctuations of the bidding price and the asking price of certain products – currencies, stocks, and so on.

This is happening real time, so the changes can be very rapid. Here is where WebSockets will come in handy, as you will see later.

In the past, people did something similar on paper, but the ‘real-time' part was impossible, of course.

A regular Order Book usually has two sides: buying (or bidding), shown in green on the left side and selling (or asking), red, on the right.

Classic Order book

The Plan for our Order Book App

Our Order Book app will consist of five parts:

order book main view
grouping select box
Toggle Feed button
Kill Feed button
Status Message.

The app design will look as shown below. Note that the Status Message component, that you will see in the my implementation, is missing on these screenshots:

Desktop layout

Mobile layout

Application Features

Order book

The order book has two sides: the buy side and the sell side.

Both sides contain information about the number of orders opened at each price level.

Each level displays:

Price: this is what defines the level. As orders must be placed at a price that is a multiple of the selected market's tick size (0.5), each level will be an increment of 0.5 (as long as there is an order open at that level).
Size: the total quantity of contracts derived from open orders that have been placed at this level.
Total: the summed amount of contracts derived from open orders that reside in the book at this level and above. To calculate the total of a given level we take the size of the current level and sum the sizes leading to this price level in the order book. The total is also used to calculate the depth visualizer (colored bars behind the levels). The depth of each level is calculated by taking that level's total as a percentage of the highest total in the book.

Grouping Select Box

By default the orders are grouped by the selected market's ticket size (0.5).

Possible toggling of the grouping is between 0.5, 1, 2.5 for XBTUSD market and 0.05, 0.1 and 0.25 for ETHUSD market.

To group levels, we combine the levels rounded down to the nearest group size – for example, if we change our grouping from 0.5 to 1 then we would combine the data from prices 1000 and 1000.5 and display it under a single level in the order book with the price 1000.

Toggle Feed Button

This button toggles the selected market between PI_XBTUSD and PI_ETHUSD. These are the two markets we will support -> Bitcoin/USD and Ethereum/USD.

It supports dynamic grouping logic and handles groupings for XBT (0.5, 1, 2.5) and groupings for ETH (0.05, 0.1, 0.25).

Kill Feed Button

Clicking this button stops the feed.

Then clicking this button a second time renews the feed.

Status Message

This message will show the currently selected market. It will also show a message saying the feed is killed.

Tech Stack for our App

Here is a list of the main technologies we will be using:

React with TypeScript (yarn create react-app my-app --template typescript) — a UI library we will use for building our application’s user interfaces.
Redux — a state management library we will use for managing our application’s state.
WebSockets — The WebSocket object provides the API for creating and managing a WebSocket connection to a server, as well as for sending and receiving data on the connection. We will use it to implement the logic for consuming the live feeds as well as to be able to stop and renew.
styled-components — a CSS-in-JS library that lets you define the CSS styles of your components using ES6 template literals. We will use it to add styles to our app and make the look and feel beautiful. It utilizes tagged template literals to style your components and removes the mapping between components and styles. This means that when you’re defining your styles, you’re actually creating a normal React component that has your styles attached to it.
react-testing-library — The React Testing Library is a very light-weight solution for testing React components. We will use it for testing the UI components of our app.
Jest - a JavaScript Testing Framework that has become the de facto standard when we talk about testing React applications. We will use it to write some unit tests that will cover the reducer functions we have in our app.

How to Build the App

From this point onward I will try to guide you through the process I followed when building this.

💡 I must say that what I am showing you here is just a way of creating such an app – but it's not the way in any regard. Probably folks with more experience in crypto would do it better.

Project Structure

The project structure is pretty straightforward. We are using React and styled-components, which makes this way of structuring very convenient.

Let's see first what it looks like and then I will explain the what and the why.

Project structure

As you can see on the image above, I have organized most of the components in folders. Each folder contains an index.tsx file, a styles.tsx and a .test.tsx files.

index.tsx – contains the code responsible for the component logic.

styles.tsx – contains the code responsible for styling the component. Here is where styled-components shines.

.text.tsx – these contain the component unit tests.

Let me give you a short summary of the idea behind each of the components in the components folder. Starting top to bottom:

Button renders a button with a given background color and title. It's used for the two buttons in the footer, Toggle Feed and Kill Feed / Renew Feed.

DepthVisualizer is the component responsible for drawing the red and the green backgrounds you are seeing behind the numbers. It does this by rendering a row (an HTML div element) with given width, position being left (Bids) or right (Asks).

Footer – well, there's not much to say here, it contains the two buttons used in the app.

GroupingSelectBox renders the select box we use to change the grouping value, using setGrouping reducer to amend the application state when grouping is being changed.

Header renders the title of the application as well as the GroupingSelectBox component.

Loader renders loading animation implemented by leveraging SVG.

Order Book contains the core logic of the app. Separated components are located in sub-folders, and the Redux state management logic is here also.

Spread renders the spread value, displayed in the middle of the header (in desktop view). The component itself contains short methods for calculating the amount itself and the percentage value.

StatusMessage is a small component used to display status messages. It basically shows which market is currently being displayed and whether the feed is killed.

Rendering Performance

Here is a good moment to talk about rendering performance and inline styling a bit.

Rendering is the process of React asking your components to describe what they want their section of the UI to look like based on the current combination of props and state.

This process is triggered by a change of the state in your component. This change could be caused by some of the props being changed or by some internal logic of the component.

The point here is that when re-rendering happens unnecessarily, it reduces the performance of our app. This is exactly what happened to me when I introduced the initial implementation of the DepthVisualizer component. It was using styled-components, that is JavaScript, for the drawing part.

In order to solve this, I have changed the component to use inline styles, that is pure CSS, instead of a CSS in JS approach. In other words, my bottleneck was using JavaScript animations, which is a famous reason for reduced performance.

Here is how it looks like now:

const DepthVisualizer: FunctionComponent = ({windowWidth, depth, orderType }) => {
  return <div style={{
    backgroundColor: `${orderType === OrderType.BIDS ? DepthVisualizerColors.BIDS : DepthVisualizerColors.ASKS}`,
    height: "1.250em",
    width: `${depth}%`,
    position: "relative",
    top: 21,
    left: `${orderType === OrderType.BIDS && windowWidth > MOBILE_WIDTH ? `${100 - depth}%` : 0}`,
    marginTop: -24,
    zIndex: 1,
  }} />;
};

export default DepthVisualizer;

Inline styling is when you write your CSS along with your markup, as values for the style attribute. This is something that is NOT considered a good practice, but as you can see here, there are cases when it's necessary to use it.

💡 Usually you would extract your CSS code into a separate file.

Footer a simple dummy component used to render the two buttons in the footer of the app.

Dummy components, also known as stateless or representational ones, are components that don't hold state and are usually used just to visualize data in some way. This data is being passed via the props. For example the isFeedKilled flag in the component above.

If such a component needs to execute some kind of interaction, it usually does this by accepting (again via the props, for example toggleFeedCallback) callback functions that can be executed when that interaction happens. For example clicking a button.

On the opposite side we could have smart or state-full components. They are the ones that are connected to the app state and can manipulate it directly. Usually they are the ones that read the data from the state and pass it to the stateless components via their props.

GroupingSelectBox contains the Select element you can use to switch between the groupings.

Header is the header part of the app. It takes care of setting properly the layout consisting of the title 'Order Book' on the left and the select box on the right.

Loader is used as an indicator for when the data has not yet been loaded. It leverages a SVG animation I have found online.

Order Book is where the real thing is happening. This one consists of a few smaller components:

TableContainer – used for styling the views for both the Odds and Bets sides.
TitleRow – this is the component responsible for displaying the titles of the columns: prize, size, and total, respectively.

How to Build the UI with React and styled-components

When we talk about component-based structure, such as the one React provides us, the styled-components library is likely one of the first choices you might make when styling is needed.

Like Josh Comeau says in his detailed article:

💡 It's a wonderful tool. In many ways, it's changed how I think about CSS architecture, and has helped me keep my codebase clean and modular, just like React!

As the name of the lib hints, we could easily style our components by using the CSS-in-JS pattern. Here is an example of how I used it to write the styles for my Button component:

import styled from "styled-components";

interface ContainerProps {
  backgroundColor: string;
}

export const Container = styled.button`
  padding: .3em .7em;
  margin: 1em;
  border-radius: 4px;
  border: none;
  color: white;
  background: ${props => props.backgroundColor};
  font-family: "Calibri", sans-serif;
  font-size: 1.2em;

  &:hover {
    cursor: pointer;
    opacity: .8;
  }
`

Notice how I am using an interface in my styles file, and also the background property being passed as an argument via props. This is part of the CSS-in-JS story.

The possibility to use CSS code in JavaScript or (as someone might say) vice versa comes very handy. For example, when we need a component to look differently depending on something, we can pass through its props a parameter to define this.

As every style is actually a component, this way of writing styles feels a lot like writing React components. I mean, in the end, everything is components, right?

Responsiveness and Page Visibility Detection

While working on this app, I read in several places that, for applications which support rapid updates, is a good practice to implement some kind of mechanism for pausing the whole thing when it is not being used by the user. For example when the user minimizes the browser window or just opens another tab.

Since our Order book is consuming a lot of new chunks of data every second via WSS, I decided to implement such a mechanism as well.

What this does is:

it shows a loader when the data is not there yet
it changes the meta title to signify that the app is in paused mode
it unpauses the work once the app window is on focus

Active mode

Paused mode

You may see the whole implementation here.

The essential part is in the useEffect hook, which is triggered only once when the application renders for first time.

In there we take advantage of the Page Visibility API by attaching the necessary listeners. And then, in the handlers, we simply execute the logic we want.

Window Size Detection

In almost every app that has some level of responsiveness, you need some logic for detecting the changes in the window size and taking some actions accordingly.

In other words, you need to know when your app is being viewed in certain screen size, so you can arrange your components and adjust your styles so that everything looks nice and in place.

This is especially valid for mobile friendly applications, where responsiveness is essential.

Our implementation of the window size change detection is based on the innerWidtgh property of the browser window object and onresize event that is being triggered when it gets resized.

I am attaching a listener for this event in a useEffect hook in App.tsx file. And then, every time the window size changes, I am setting the new width to a state variable via setWindowWidth hook.

const [windowWidth, setWindowWidth] = useState(0);
...
...

// Window width detection
useEffect(() => {
  window.onresize = () => {
    setWindowWidth(window.innerWidth);
  }
  setWindowWidth(() => window.innerWidth);
}, []);

Then propagate this variable down through all interested components and use it accordingly. For example here is how I use it in Order Book/index.tsx in order to know when and where to render the TitleRow component.

{windowWidth > MOBILE_WIDTH && <TitleRow windowWidth={windowWidth} reversedFieldsOrder={false} />}

TitleRow component - desktop view

TitleRow component - mobile view

Note that it appears on different position depending on that whether you are seeing the app on desktop or mobile.

You may take a look at the component itself and see similar approach of using the window width there.

State Management with Redux

As you probably guessed already, I used Redux for managing the state of the app.

The main logic behind that is concentrated in the orderbookSlice reducer. In the following few lines I will walk you through it and see how and why I built it that way.

First we define the interface and the initial state of our order book data. The initial state contains the default values we need to have in place when starting the app.

export interface OrderbookState {
  market: string;
  rawBids: number[][];
  bids: number[][];
  maxTotalBids: number;
  rawAsks: number[][];
  asks: number[][];
  maxTotalAsks: number;
  groupingSize: number;
}

const initialState: OrderbookState = {
  market: 'PI_XBTUSD', // PI_ETHUSD
  rawBids: [],
  bids: [],
  maxTotalBids: 0,
  rawAsks: [],
  asks: [],
  maxTotalAsks: 0,
  groupingSize: 0.5
};

Then there are a few short, self-explanatory methods helping to manipulate the levels data:

const removePriceLevel = (price: number, levels: number[][]): number[][] => levels.filter(level => level[0] !== price);

const updatePriceLevel = (updatedLevel: number[], levels: number[][]): number[][] => {
  return levels.map(level => {
    if (level[0] === updatedLevel[0]) {
      level = updatedLevel;
    }
    return level;
  });
};

const levelExists = (deltaLevelPrice: number, currentLevels: number[][]): boolean => currentLevels.some(level => level[0] === deltaLevelPrice);

const addPriceLevel = (deltaLevel: number[], levels: number[][]): number[][] => {
  return [ ...levels, deltaLevel ];
};

Then the real magic is happening. If the size returned by a delta is 0 then that price level should be removed from the order book. Otherwise you can safely overwrite the state of that price level with new data returned by that delta.

/** The orders returned by the feed are in the format
 of [price, size][].
 * @param currentLevels Existing price levels - `bids` or `asks`
 * @param orders Update of a price level
 */
const applyDeltas = (currentLevels: number[][], orders: number[][]): number[][] => {
  let updatedLevels: number[][] = currentLevels;

  orders.forEach((deltaLevel) => {
    const deltaLevelPrice = deltaLevel[0];
    const deltaLevelSize = deltaLevel[1];

    // If new size is zero - delete the price level
    if (deltaLevelSize === 0 && updatedLevels.length > ORDERBOOK_LEVELS) {
      updatedLevels = removePriceLevel(deltaLevelPrice, updatedLevels);
    } else {
      // If the price level exists and the size is not zero, update it
      if (levelExists(deltaLevelPrice, currentLevels)) {
        updatedLevels = updatePriceLevel(deltaLevel, updatedLevels);
      } else {
        // If the price level doesn't exist in the orderbook and there are less than 25 levels, add it
        if (updatedLevels.length < ORDERBOOK_LEVELS) {
          updatedLevels = addPriceLevel(deltaLevel, updatedLevels);
        }
      }
    }
  });

  return updatedLevels;
}

What follows after these are few helper methods. Let me say a few words about each of them now:

addTotalSums – with the help of this method, we iterate through the orders data, bids or asks, and calculate for each of them the total sum. The total sum value is then used for making the background visualizations.
addDepths – we use this method to calculate the so-called depth for each order. These values will be used later by the depth meter component to display the red and green rows in the background.
getMaxTotalSum – this one returns the max value of all total sums.

Everything below is what we use for creating the application state. As per the Redux Toolkit documentation, it’s using createSliceAPI to create the slice.

Redux state

Creating a slice requires a string name to identify the slice, an initial state value, and one or more reducer functions to define how the state can be updated.

Once a slice is created, we can export the generated Redux action creators and the reducer function for the whole slice.

The last few lines consist of the exports in question – action creators, state slices selectors and the main reducer.

export const { addBids, addAsks, addExistingState, setGrouping, clearOrdersState } = orderbookSlice.actions;

export const selectBids = (state: RootState): number[][] => state.orderbook.bids;
export const selectAsks = (state: RootState): number[][] => state.orderbook.asks;
export const selectGrouping = (state: RootState): number => state.orderbook.groupingSize;
export const selectMarket = (state: RootState): string => state.orderbook.market;

export default orderbookSlice.reducer;

With all that, our state manipulation logic is complete. 🎉

Now it’s time to take a look at the protocol we used in our app to take advantage of all these rapid changes in the data we consume.

Websocket Protocol (WSS)

As you may have noticed, we're using the Web Socket communication protocol for fetching data into our application. We also use its features, as you will see in a moment, to accomplish other things (such as toggling the feeds and subscribe/unsubscribe from the data channel).

Here is how I used it.

Instead of trying to rely on manual implementation, I used the react-use-websocket package. It gives you all you need when you want to leverage WSS in a React app. If you want to go into details about this, you may take a look at their documentation.

A Few Words About My Implementation

What we need fist is the endpoint URL where the data feeds are coming from. I am sure there are multiple options out there when we talk about cryptocurrencies. In our app I used the one provided by www.cryptofacilities.com/.

const WSS_FEED_URL: string = 'wss://www.cryptofacilities.com/ws/v1';

Then the only thing we need to do to start consuming the data is to put the useWebSocket hook to work. As you may have guessed already, this hook is provided by the package mentioned above.

import useWebSocket from ["react-use-websocket"](<https://github.com/robtaussig/react-use-websocket>);

...
...
...

const { sendJsonMessage, getWebSocket } = useWebSocket(WSS_FEED_URL, {
    onOpen: () => console.log('WebSocket connection opened.'),
    onClose: () => console.log('WebSocket connection closed.'),
    shouldReconnect: (closeEvent) => true,
    onMessage: (event: WebSocketEventMap['message']) =>  processMessages(event)
  });

We pass the endpoint as the first argument and a few callback functions after that. These help us perform certain actions when one of the following happens:

onOpen – what to do when WebSocket connection is established.
onClose – what to do when WebSocket connection is terminated.
shouldReconnect – this is just a flag, saying if we want automatic reconnect when the connection drops for some reason.
onMessage – this is the main event that brings us the chunks with the data (I call processMessage method every time when that happens. This means that every time when a new chunk of data is received, we process it and display it respectively).

Down below is the method in question. It simply does two things:

Either calls a method called process (No pun intended 😄) – this method is called every time new data for bids or asks is received and it processes it accordingly.
Dispatches an event that is using one of the reducer functions we have seen earlier. This function practically creates the initial state of our application.

In order to decide whether we are adding data to the current state or we should initialize it, we check for a property called numLevels. This is something that comes from the API, the very first time we establish the WebSocket connection.

Initial payload

The rest of the code you see in this file is mostly for preparing and rendering the results on the screen.

The most interesting part would be the method buildPriceLevels that is used for both halves – bids and asks. It sorts the data, makes the necessary calculations, and passes it to the relevant components for visualizing it. Those are DepthVisualizer and PriceLevelRow I mentioned earlier in this article.

Grouping

The grouping is an important part of how the order book works, as it defines by what ticket size the orders are grouped.

In our application, I have implemented a toggling functionality per each market, that allows grouping it as follows:

Between 0.5, 1, 2.5 for XBTUSD market.

XBTUSD market grouping

Between 0.05, 0.1 and 0.25 for ETHUSD market.

ETHUSD market grouping

There is a short gist I created when trying to figure out how to implement the grouping logic. You may find it here.

Also, aside from that gist, while developing this I have performed more than a few experiments out of the project itself. And just because these are just local files on my computer, I will publish them here for those of you who are even more curious.

It’s a small side npm project that has only one dependency. Here is the package.json file:

{
  "name": "grouping",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "lodash.groupby": "^4.6.0"
  }
}

And here is the code itself:

const bids = [
    [
        50163,
        110
    ],
    [
        50162,
        13140
    ],
    [
        50158,
        3763
    ],
    [
        50156,
        1570
    ],
    [
        50155,
        21997
    ],
    [
        50152.5,
        450
    ],
    [
        50151,
        4669
    ],
    [
        50150.5,
        10329
    ],
    [
        50150,
        2500
    ],
    [
        50149.5,
        450
    ],
    [
        50149,
        4022
    ],
    [
        50148,
        20000
    ],
    [
        50147,
        5166
    ],
    [
        50146.5,
        5274
    ],
    [
        50145,
        174609
    ],
    [
        50143,
        20000
    ],
    [
        50141,
        28000
    ],
    [
        50140.5,
        5000
    ],
    [
        50138,
        6000
    ],
    [
        50132.5,
        4529
    ],
    [
        50132,
        4755
    ],
    [
        50131,
        12483
    ],
    [
        50128.5,
        61115
    ],
    [
        50128,
        23064
    ],
    [
        50125.5,
        181363
    ]
]

/* function roundDownNearest(num, acc) {
    if (acc < 0) {
        return Math.floor(num * acc) / acc;
    } else {
        return Math.floor(num / acc) * acc;
    }
} */

/* function groupByTicketSize(ticketSize, levels) {
    const result = levels.map((element, idx) => {
        const nextLevel = levels[idx + 1];

        if (nextLevel) {
            const currentPrice = element[0];
            const currentSize = element[1];
            const nextPrice = nextLevel[0];
            const nextSize = nextLevel[1];
            console.log("current level: ", element)
            console.log("next level: ", nextLevel)

            element[0] = roundDownNearest(currentPrice, ticketSize);

            if (currentPrice - nextPrice < ticketSize) {
                element[1] = currentSize + nextSize;
            }
            console.log("==================================> Result: ", element)

            return element;
        }

    }).filter(Boolean); 


    console.log("============================================================");
    console.log(result)
} */

const test = [
    [1004.5, 1],
    [1001.5, 1],
    [1001,   1],
    [1000.5, 1],
    [1000,   1],
    [999.5,  1],
    [999,    1],
    [990,    1],
    [988,    1]
]

function groupByTicketSize(ticketSize, levels) {
    const result = [];

    for (let i = 0; i < levels.length; i++) {
        console.log(levels[i])
        const prevLevel = levels[i-1]
        const level1 = levels[i]
        const level2 = levels[i+1]

        if (prevLevel && level1 && level1[0] - ticketSize === prevLevel) return

        if (level2 && level1[0] - level2[0] < ticketSize) {
            const newLevel = [level2[0], level1[1] + level2[1]];
            console.log("newLevel", newLevel)
            result.push(newLevel);
        } else {
            result.push(level1)
        }
    }

    console.log("============================================================");
    console.log(result)
}

// groupByTicketSize(1, bids);
groupByTicketSize(1, test);

How to Perform Unit Tests on the App

For performing unit testing I used the react-testing-library.

The main idea behind it that the developer should write tests only for what the user will see and interact with. There is no much point of testing implementation details.

💡 Imagine, just to give you an example, that you have implemented a list component that is just displaying lines of textual data. Say something like a todo list.

Then imagine that this data is coming from an API call in the shape of array. A data structure that you could easily iterate through via various methods – some sort of a loop cycle, such as for() or while(). Or you could use another more functional approach, say .map() method.

Now ask yourself – for the end user, the one that will just see the listed text data, does your implementation matter? As long as everything works as expected and in a good, performant way, the answer is ‘no, it does not’.

This is what your tests should reflect.

In the context of our Order Book application, each test file is located in the same directory as the implementation file. Most of the tests are short and self-explanatory, due to the fact that these are testing mostly rendering logic and only the happy path.

For example let’s take a look at the button component tests below:

import React from 'react';
import { render, screen } from '@testing-library/react';
import Button from './index';

test('renders button with title', () => {
  render(<Button backgroundColor={'red'} callback={jest.fn} title={'Toggle'} />);
  const btnElement = screen.getByText(/Toggle/i);
  expect(btnElement).toBeInTheDocument();
});

It just verifies that the component is rendered properly and it displays what we expect the user to see. Which is the title Toggle in this case.

For testing the reducers I have used Jest, as this is the only not visual part that we'll cover. These tests are also pretty simple and self-explanatory. I use them for testing whether the initial application state is in place and to see that adding price levels to that state works correctly.

How to Deploy the App to Vercel

Finally – deployment time. 🎉

After finishing the development and testing our application, let’s put it live.

I used the Vercel platform for this purpose. They offer a pretty rich and easy to use interface as well as integrations for all famous source control platforms out there – including, of course, GitHub (where our application repo lives).

Assuming you have a GitHub account, what you need to do if you want to deploy it on your own is to login with it here.

Vercel login screen

Click on the +New Project button in the top right corner. Then import your Git repository using the provided options in the screen that opens. Here is how mine looks:

Vercel Import Git Repository screen

After importing the project, you will be able to do the actual deploy. When finished, Vercel will generate URLs for you to access your newly deployed app.

Vercel production deployment screen

And I think you will receive an email letting you know if your deployment was successful. That email also contains these URLs.

Vercel successful deployment email

Congratulations! 👏🏻

You now have your own Order Book application up and running online.

How to Add a Build Badge on GitHub

This is not order book related, but I decided to share it with you here anyway. It’s about those small details that make the big picture somehow more complete and attractive.

Maybe some of you have wondered how can you get one of these so called badges?

Here is the answer: https://shields.io/.

You go to the Other section and find the GitHub Deployments option.

Then click on it and follow the instructions.

There is one more thing you need to do in order to have this fully functioning. You go to your GitHub repository → Actions tab and create new workflow file. You may just go ahead and copy the content of mine from here. Name it main.yml.

What this will do is run the jobs defined in that file. In our case this is just the build job which is basically spinning a new build and running the tests.

After completing this, you just need add the following lines to your README file:


[![Tests]()]()
[![Build Status][build-badge]][build]

[build-badge]: 
[build]:

💡 Don’t forget to put your own details in the URLs, that is your GitHub username and the name of your repository.

After pushing these changes you should see the badges displayed on your README: 🥳.

GitHub badges

Wrapping Up

If you are reading this from the beginning, I will name you a champion. 🍾

It has been a long trip, but hopefully interesting and fun to walk along with me!

Now it’s time to summarize what we have done here and try to extract some useful insights which will help us in our future development challenges.

I will layout below my opinion of what was the most challenging in building this application. And I will be even more eager to find out what is yours.

Rendering Performance

This really bit me in the beginning, when I was building the UI and was trying to implement the drawing of the price level rows.

I mentioned earlier how I have managed to solve it and I think this is going to be something I will remember for sure.

Grouping Functionality

Implementing this was also kind of challenging because there were several factors I had to take into account. Because of the market we are in and the range I had to do the calculations in.

It took me a while to polish it (remember the side mini project and the gist I shared in the previous sections) and I still think it could be improved even more. Try switching between the markets and the grouping values multiple times and observe the results.

Space for Improvement

One thing already mentioned is for sure the grouping. Which should also improve the visualizing of the red and green parts – they (almost) always should form a not ideal triangle.

If we try to look at the bigger picture, this order book application can be a part of a dashboard screen filled with other widgets as well, and they all can interact between them.

For example, changing the grouping of the order book to reflect on changing the views in the other widgets as well – say showing a market chart like this one below:

I am not even mentioning adding new markets as an improvement, as it’s kinda clear. But this should be taken into account when building the functionality for the current markets, as to do it in a way that will be easily extendable. So that adding a new market to the order book be a trivial and quick task to do.

I think that's all from me.

Thanks for reading! 🙏

References

Here are few links you might find useful to read:

The styled-components Happy Path

Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior

How to Style Your React Apps with Less Code Using Tailwind CSS, Styled Components, and Twin Macro

freeCodeCamp — Wed, 15 Apr 2020 10:45:33 +0000

By Ibrahima Ndaw

Tailwind is a utility-first CSS framework for rapidly building custom designs. It can be used alone to style React Apps. However, it can be better combined with Styled Components. That combination brings the magic of Tailwind into CSS-in-JS.

In this guide, we will build a form component without writing a single line of CSS using Tailwind CSS, Styled Components, and Twin Macro.

Let's dive in!

Why use it?
Setting up
Configuring Tailwind CSS
Tailwind CSS and Styled Components
Conclusion
Resources

Why use it?

The "Why" is pretty legit and important, since we can use either Tailwind CSS or Styled Components. So why combine them and use both at the same time?

Well, Tailwind classes can be quite long, and it causes our components to have some readability issues. Maintaining them can be tough.

In the case of Styled Components, there is no problem except the fact that we have to write the style. It is not that problematic – but why should we write something that Tailwind already offers?

So it makes sense to use Tailwind CSS in combination with Styled Components. Tailwind CSS helps with utility classes, and Styled Components keeps our components clean with the help of CSS-in-JS.

Setting up

In this guide, we will build a simple form as an example. And to do so, we need a fresh React app.

So, let's run in the terminal the following command.

    npx create-react-app react-styled-tailwind

Next, structure your folder as follows:

├── src
|  ├── App.js
|  ├── App.test.js
|  ├── assets
|  |  └── tailwind.css
|  ├── index.js
|  ├── serviceWorker.js
|  ├── setupTests.js
|  ├── tailwind.config.js
|  └── styles
|     └── index.js
├── babel.plugin.js
├── package.json
├── postcss.config.js
├── README.md
├── yarn-error.log
└── yarn.lock

I will explain each file as we progress, but for now, let's install the dependencies.

    yarn add -D tailwindcss twin.macro autoprefixer babel-plugin-macros postcss-cli

Next, install Styled Components by running this command:

    yarn add styled-components

Once these libraries are installed, we can now move to the configuration of Tailwind CSS

Configuring Tailwind CSS

To configure it, we have to manually add a config file or run the following command to generate a new one:

    npx tailwind init src/tailwind.config.js

Here, instead of generating the config file on the root directory, you have to put it on the src folder – otherwise an error will be thrown by Tailwind Macro.

And the generated file will look like this:

tailwind.config.js

module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

As you can see, the config file is "empty" since there is no configuration. For this tutorial, we don't need to configure anything here. But you can customize it to follow your needs or run the command with the --full option to get the complete Tailwind config.

Next, we need to create a new file postcss.config.js in the root directory.

postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss")("./src/tailwind.config.js"),
    require("autoprefixer"),
  ],
}

This configuration tells the postcss.config.js file to use the Tailwind CSS library and the tailwind.config.js file during compile-time. With the help of autoprefixer it tracks which properties need to be prefixed.

With that setup, we can now move to the babel.plugin.js file which helps to transform Tailwind classes into CSS-in-JS code.

babel.plugin.js

module.exports = {
  tailwind: {
    plugins: ["macros"],
    config: "./src/tailwind.config.js",
    format: "auto",
  },
}

Later we will see in action what this file does. But for now, just keep in mind that it's the glue between Tailwind CSS and Styled Components.

There are just three last steps to do to complete the setup.

First, in the tailwind.css file, we need to import some utilities from the Tailwind library.

src/assets/tailwind.css

@tailwind base;

@tailwind components;

@tailwind utilities;

Here, as you can see, there is nothing fancy, just some imports that allow us to use Tailwind utility classes.

The second step is to connect our React App with Tailwind CSS.

index.js

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import "./assets/styles.css"
import * as serviceWorker from "./serviceWorker"

ReactDOM.render(
  <React.StrictMode>
    <App />
  React.StrictMode>,
  document.getElementById("root")
)

serviceWorker.unregister()

Here, we import assets/styles.css which contains the CSS style. And later, we will tweak the default script a bit to build the CSS and add it to the assets/styles.css file during compile.

And last but not the least, we have to update the package.json file.

package.json

"scripts": {
    "build:css": "postcss src/assets/tailwind.css -o src/assets/styles.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/styles.css",
    "start": "npm run watch:css & react-scripts start",
    "build": "npm run build:css react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
 }

These two scripts build:css and watch:css will respectively build the CSS and watch for changes and rebuild it if needed. And as I said earlier, the output file will be located in the assets folder.

With that change, we can now use Tailwind in our app. Let's now combine it with Styled Components.

Tailwind CSS and Styled Components

Earlier, in our structure folder, we had a styles folder. It's time to tweak it with the following code.

styles/index.js

import styled from "styled-components"
import tw from "twin.macro"

const StyledForm = styled.main.attrs({
  className: "flex flex-col h-screen justify-center items-center bg-gray-100",
})`
  & {
    form {
      ${tw`bg-white text-center rounded py-8 px-5 shadow max-w-xs`}
    }
    input {
      ${tw`border-gray-300 mb-4 w-full border-solid border rounded py-2 px-4`}
    }
    button {
      ${tw`bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 border border-blue-700 rounded`}
    }
  }
`
export default StyledForm

We start by importing tw which allows us to use Tailwind classes in nested properties. It's perfectly fine to use the utility classes with the className attribute, but if you want to nest properties you have to use the twin.macro library.

This library will use the babel plugin macros config (babel.plugin.js) to transform the Tailwind CSS utility classes used by nested selectors into readable code that Styled Components can understand.

You can see in this example below how the transformation is done.

// input
const test = ${tw`text-center bg-red w-full`}
// output
const test = {
    background: 'red',
    textAlign: 'center',
    width: '100%'
}

Great! Now that we have combined Tailwind with Styled Components, let's add the styled component to the App.js file.

App.js

import React from "react"
import StyledForm from "./styles"

function App() {
  return (
    <StyledForm>
      <form>
        <input type="text" placeholder="Full name" />
        <input type="text" placeholder="Email" />
        <input type="text" placeholder="Password" />
        <button>Sign Inbutton>
      form>
    StyledForm>
  )
}

export default App

Here, we just imported the styled component and wrapped everything with it to make our form look nice.

Great! You can already see how powerful this combination is. We have built a form component without writing a line of CSS and the component is still readable.

Conclusion

There is a bit of hassle to set up Tailwind CSS. But once it's done and combined with CSS-in-JS, it's really powerful and flexible. This is partly because we can customize the tailwind.config.js file to follow our need or just write normal CSS as we usually do with Styled Components. It's definitely something to consider in your next React app.

Thanks for reading!

You can find the Source Code here.

Resources

Tailwind CSS Docs

Tailwind CSS Cheat sheet

Twin Macro Docs

Styled Components Docs

React Native Styling: Styled Components, Flexbox Layouts, and More

freeCodeCamp — Sun, 12 Jan 2020 19:53:00 +0000

React Native provides an API for creating stylesheets and styling your components: StyleSheet.

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';

export default class App extends Component {
  render () {
    return (
      <View>
        <Text style={styles.header}>I am a header!Text>
        <Text style={styles.text}>I am some blue text.Text>
      View>
    );
  }
}

const styles = StyleSheet.create({
  header: {
    fontSize: 20
  },
  text: {
    color: 'blue'
  }
});

While regular CSS stylesheets aren’t valid, React Native’s superset of CSS is very similar to traditional CSS.

Many CSS properties (e.g. color, height, top, right, bottom, left) are the same in StyleSheet. Any CSS properties that have hyphens (e.g. font-size, background-color) must be changed to camelCase (e.g. fontSize, backgroundColor).

Not all CSS properties exist in StyleSheet. Since there is no true concept of hovering on mobile devices, CSS hover properties don’t exist in React Native. Instead, React Native provides Touchable components that respond to touch events.

Styles are also not inherited as they are in traditional CSS. In most cases, you must declare the style of each component.

Flexbox Layouts

React Native uses an implementation of flexbox similar to the web standard. By default, items in the view will be set to display: flex.

If you do not want to use flexbox, you can also arrange React Native components via relative or absolute positioning.

Flexbox in React Native defaults to flexDirection: column, instead of flex-direction: row (web standard). The column value displays flexible items vertically, which accommodates mobile devices in portrait orientation.

To learn more about flexbox, visit this detailed guide on CSS-Tricks and a gamified learning approach with Flexbox Froggy.

Styled Components

Including lots of styles in a file with a component isn’t always easy to maintain. Styled components can solve this issue.

For example, a Button component may be used in multiple places across an application. Copying and pasting the style object with each Button instance would be inefficient. Instead, create a reusable, styled Button component:

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

const Button = ({ onPress, children }) => {
  const { buttonStyle, textStyle } = styles;
  return (
    <TouchableOpacity onPress={onPress} style={buttonStyle}>
      <Text style={textStyle}>
        {children}
      Text>
    TouchableOpacity>
  );
};

export default Button;

const styles = {
  textStyle: {
    alignSelf: 'center',
    color: '#336633',
    fontSize: 16,
    fontWeight: '600',
    paddingTop: 10,
    paddingBottom: 10
  },
  buttonStyle: {
    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#336633',
    paddingTop: 4,
    paddingBottom: 4,
    paddingRight: 25,
    paddingLeft: 25,
    marginTop: 10,
    width: 300
  }
};

The styled Button component can be easily imported and used across the application without repeatedly declaring the style object:

import React, { Component } from 'react';
import { TextInput, View } from 'react-native';
import Button from './styling/Button';

export default class Login extends Component {
  render() {
    return (
        <View>
          <TextInput placeholder='Username or Email' />
          <TextInput placeholder='Password' />
          <Button>Log InButton>
        View>
    );
  }
}

Libraries for Styling

There are a few popular libraries for styling React Native. Some of them provide features similar to Bootstrap, including default forms, button styles, and page layout options.

One of the most popular libraries is styled-components. There are many others you can find on npm and GitHub to try for yourself.

You Don't Need CSS-in-JS: Why (and When) I Use Stylesheets Instead

Colby Fayock — Tue, 13 Aug 2019 14:30:00 +0000

CSS-in-JS is all the rage. But is it really the best option?

Solving problems you don’t need to solve

Don’t get me wrong, CSS-in-JS is a great solution, but it’s for a problem most people don’t have. Maintaining your components in a very siloed approach absolutely helps things like:

Unintentional side effects of cascading styles
Helping teams organize their rules
Avoiding stepping on each other’s toes while developing

But those really only become problems with large teams with many developers and a vast library of components.

So what do you want me to use?

To start from a slightly higher point of view, you can get in the habit of a few basic ideas:

Set and follow some basic rules for writing
Use tooling or set standards for organization
Developing with methodologies like BEM

This will eliminate any of those concerns on a smaller project (or large) and can actually make life easier.

What CSS-in-JS is good at…

Helping large teams preserve sanity

Part of why this solution exists is because very large teams have a hard time avoiding conflicts when they have a huge library to deal with. Being able to have your component and anything that impacts it in one compartmentalized area helps people avoid stepping on each other’s feet and potentially rolling out tweaks that unintentionally cascade throughout the app. This is great but more likely than not, you’re 1 of a few (or alone) working on a small app. If you and your team aren’t communicating about some basic rules and standards, I’d argue you have bigger problems.

Kind of eliminates the need to learn CSS (kind of)

Some developers mock CSS saying it’s not real code, others are scared about it’s magic (don’t be, embrace it). Only having to worry about a few rules in one component helps put people’s mind at ease knowing it’s just a little more JS that changes how it looks a bit.

What can both do?

CSS pointing at CSS

Hot Module Reloading (HMR)

Though some say an advantage to CSS-in-JS is HMR, you’ll find this works fine with stylesheets. Sometimes it actually works a little nicer if you’re working on a component that requires a rerender such as those with a network request as a dependency, where the CSS changes won’t force that rerender.

Variables, Global Settings

If someone is making an argument that CSS can’t do that, it’s because they haven’t been paying attention for a while. Not only does Sass provide this, it's native to modern browsers.

Encapsulation

Yes, you don’t need JS to do this. Add a class name to the top-level element of the component or page, nest all styles inside, and you have your encapsulation.

.page-about {
  .header {
    background-color: red;
  }
}

.navigation {
  .button {
    background-color: blue;
  }
}

Linting

https://stylelint.io/

A lot more

Honestly, there’s probably a lot more that both do similarly that you just don’t realize.

What stylesheets and SASS do better…

SASS allows you to configure variables, custom functions, and mixins that take your CSS development to the next level.

Ignoring the bad selector names:

// settings.scss

$color-ultraviolet: #5F4B8B;

// colbys-styles.scss

@import "settings";

.colbys-text-color {
  color: $color-ultraviolet
}

.colbys-background-color {
  background-color: $color-ultraviolet
}

While the syntax and configuration of this are arguably easier than setting up a bunch of object configurations in JS, this greatly allows you to provide consistent visual experiences and DRY up your code.

Responsive design

One of the many things that add to the role of a good front end engineer is paying attention to how the project will look across multiple devices and sizes. Overall, UX is everyone’s job. Developing with a responsive-first mindset not only makes that process easier, it helps build a better product.

Trying to make your components responsive in JS means more Javascript and more event listeners. Not only does this add complexity, it hits performance. We can do this much easier with media queries baked right into CSS.

.colbys-sidebar {
  width: 100%;
}

// NO EVENT LISTENERS

@media (min-width: 1024px) {
  .colbys-sidebar {
    width: 25%;
  }
}

Instead of having to throttle the event listeners, making sure your event listeners unregister on unmount, and just dealing with organizing that all in “the react way”, media queries trigger on-demand and will flip your styles as needed in a more consistent manner.

Less complexity of your components

Being able to focus on the functionality and the rendered output allows you to avoid pulling in libraries or complex methods to essentially patch CSS into your JS, not to mention the JS hack or two or three that you’re using to get it working in the first place.

// This is an exaggeration

const styles = {
  color: blue;
}

if ( whos_favorite === 'Colby' || whos_favorite === 'Lord Commander' ) {
  styles.color = 'ultraviolet';
} else if ( whos_favorite === 'The Gary' ) {
  styles.color = 'red';
} else if ( whos_favorite === 'Mooncake' ) {
  styles.color = 'green';
} else if ( whos_favorite === 'HUE' ) {
  styles.color = 'blue';
} else if ( whos_favorite === 'KVN' ) {
  styles.color = 'yellow';
}

Performance

Less Javascript is always a win. It’s less your browser has to load, less your browser has to compile, which will ultimately translate to quicker page speed. When the browser loads a page, it tries to optimize the HTML and CSS as much as possible. Yes, you probably are loading more CSS upfront, but more JS is very costly and also is more likely to force a full rerender;

A lot of the little magic bits you do with Javascript can be done with some pretty powerful CSS animation methods, just browse Codepen a bit or check out something like Animista.

I don’t actually have any numbers on this aside from a few good notes and some CSS-in-JS benchmarks. Has anyone done the legwork on this?

At the end of the day, do what’s effective

Everyone has a personal preference, everyone is productive in a different way. Do what’s best for you, do what’s best for your team, and avoid treating what other developers say as dogmatic rights and wrongs.

If you’re a lone developer on a project and want to practice CSS-in-JS to get used to it for when you’re on a big team, go for it! If you’re on a huge, huge team at Facebook and want to use stylesheets, well you might run into issues if everyone’s not following the same guidelines, but do what’s best for you and your team.

The only way you can figure that out is with experience and experimentation. Play with both solutions and figure out why YOU think one is better than the other. You never know where you’ll end up after landing that gig at Google or your new startup in your garage.

Originally published at https://www.colbyfayock.com/2019/07/you-dont-need-css-in-js-why-i-use-stylesheets.

Styled Components: The Essentials Explained in 3 Steps

freeCodeCamp — Mon, 12 Aug 2019 14:45:00 +0000

By Thomas Weibenfalk

Cover Photo by Hello I’m Nik ?? on Unsplash

I love React and Styled Components. It’s like building stuff with lego bricks into something bigger and whole.

Styled Components are awesome and a perfect match for React. They really are. And they’re also easy to understand…really.

In this article I will break down everything you need to know to get started (and beyond started) in three parts. Not deeply technical, and simply explained. If you know these three things, you know enough to use Styled Components in your project without hassle.

The three things are:

How to create and use a Styled Component.
How to modify your CSS conditionally with props
How to create Global Styling.

I’ll go through them one by one now.

1. How to create and use a Styled Component

I’ll dive right into it. First you have to install Styled Components in your project. Do it by typing:

npm i styled-components

Now you’re good to go. You can use Styled Components in your projects. Below is some code that I’ll explain below. Have a good look at it and continue reading below the code.

import React from "react";
import styled from "styled-components";

const StyledLogin = styled.div`
  display: flex;
  align-items: center;
  flex-flow: column;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border: 2px solid #000;
  border-radius: 20px;
  background: #eee;

  h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
  }

  button {
    background: green;
    color: #fff;
    padding: 10px;
    margin: 5px;
    width: 150px;
    border: none;
    border-radius: 10px;
    box-sizing: border-box;
  }
`;

const StyledInput = styled.input`
  border: 1px solid #000;
  border-radius: 10px;
  padding: 10px;
  margin: 5px;
  width: 150px;
  box-sizing: border-box;
`;

const Login = () => (
  <StyledLogin>
    <h2>Loginh2>
    <StyledInput type="text" placeholder="email" />
    <StyledInput type="password" placeholder="password" />
    <button>Loginbutton>
  StyledLogin>
);

export default Login;

The above code will create a component called Login that looks like this:

Login form from the component Login.js

Nothing fancy, nothing special. Just a Login component to help us understand Styled Components better. Ok - the first thing you’ll notice in the above code is that we have to somehow tell React that we want to use Styled Components. We do this by importing it like so:

import styled from “styled-components”;

Now we have imported an object called styled that we can use to style our components. This object has different properties that you can use depending on what you want to style. If it is a div, like in our example, you just simply access the div property on the styled object. Like so: styled.div

If you want to style a button you can simply type styled.button instead.
Or if it was an h2 tag you can type styled.h2 …you get the point!

These properties are holding functions that you can call with tagged template literals. Meaning that we can send in the data to these functions by using back-ticks and then put our CSS between these back-ticks (````). You also create a const to hold the Styled Component. So if we want to create a Styled Component for our Login component we just write the below code:

const StyledLogin = styled.div`
  display: flex;
  align-items: center;
  flex-flow: column;
  width: 200px;
  height: 200px;
  // And more CSS code below
`;

In short, to create styling for a div element with Styled Components you just use this syntax:

const SomeName = styled.div` CSS code goes here … `;

Then you can just use it as a regular component:

 Your other code here …

You can create as many of these Styled Components as you need. In the above example I’ve created two Styled Components, one that’s called StyledLogin and one that’s called StyledInput.

One more thing about creating a standard Styled Component that’s good to know is the nesting part. Styled Components have the ability to nest styling just like you can do in, for example, SASS.

You can see in the above code that I have nested my styling for the h2 and the button elements. This is great in so many ways! It will make your code a lot more structural and clean. You can easily see what styling belongs to what component. You are also isolating the styling to only that component, meaning that other h2 and button elements in your App won’t be affected.

So, when it makes sense, use nesting to style elements. It doesn’t always make sense, though. You don’t have to create a completely new Styled Component for every little element. That’s when nesting like this come in handy instead.

That’s one - two to go.

2. How to modify your CSS conditionally with props.

Styled components can receive props. Just like a regular Component. By passing in props to your Styled Component you can do some conditional CSS styling. Smooooooth … ?‍♂️

Let’s say we want to change the color of the password input field depending on if the user typed in the wrong password or not.

Ok, I realize that this is a really simplified solution and there would be much more than a simple prop involved in stuff like this. But for the sake of this tutorial article, let’s say that we do it like this.

If we have a prop that’s called correct set to false, we make our textbox red instead. Let’s have a look at the below code. I’ve intentionally left out the styling code for the whole Login component to save space. So let’s pretend that that’s there and is the same as above.

const StyledInput = styled.input`
  border: 1px solid #000;
  border-radius: 10px;
  padding: 10px;
  margin: 5px;
  width: 150px;
  box-sizing: border-box;
  background: ${prop => prop.correct ? 'white' : 'red'};
`;

const Login = () => (
  <StyledLogin>
    <h2>Loginh2>
    <StyledInput correct={true} type="text" placeholder="email" />
    <StyledInput correct={false} type="password" placeholder="password" />
    <button>Loginbutton>
  StyledLogin>
);

This will give us this result:

First, take a look at the Login component. And the StyledInput components. I’ve created a prop that's called correct and I'm passing in true and false to the two different components. The one that gets the true value will be shown in white.
To access this prop value in your Styled Component CSS you can use the below code:

background: ${prop => prop.correct ? ‘white’ : ‘red’};

You just simply create a ternary operator inside an arrow function surrounded by ${} telling this Styled Component to select the white color if prop.correct is false. And use the red color if prop.correct is true. Simple as that!

You can do this with any CSS property you want! ✌️And that’s how you do conditional CSS with props in Styled Components.

Two down - one to go.

3. How to create Global Styling.

The last essential thing you need to know to use Styled Components is how to create global styling.

Global styling is achieved by using a special function for this purpose from the Styled Components library. It’s called createGlobalStyle and you import it like this:

import { createGlobalStyle } from ‘styled-components’;

Then you can create a Global Styled Component like this:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    background: #000;
    color: #fff;
  }
`;

const App = () => {
  <>
    <GlobalStyle />
    <Login />
  
}

You just place the global style component at the top level of your application. Then, it will use the style throughout your App. In this case, I assume that the top-level Component is named App. You can also use props and do some conditional CSS in global Styled Components. Just like the regular Styled Components.

Conclusion

That is it! There’s more to Styled Components than this, but I think that these really are the essentials that you need to know for using Styled Components.

If you’re interested in learning more I highly recommend that you go to the website https://www.styled-components.com/docs/ and read the docs there.

Also, thank you for reading this post. I’m a Developer from Sweden that loves to teach and code. I also create courses on React and Gatsby online. You can find me on Udemy. Just search for Thomas Weibenfalk or hook me up on Twitter @weibenfalk

I also have a Youtube channel were I teach free stuff, check it out here.

Convert the Gatsby default starter to use styled-components

freeCodeCamp — Thu, 29 Nov 2018 18:06:00 +0000

By Scott Spence

Let's go through getting styled-components working with the Gatsby default starter.

In this example we're going to use the Gatsby default starter you get with CodeSandbox and add in styled-components, so first up, open a new CodeSandbox and select Gatsby from the SERVER TEMPLATES.

1. Dependencies

In the dependencies section of the CodeSandbox editor you'll need to add the following:

gatsby-plugin-styled-components
styled-components
babel-plugin-styled-components

2. Config

Now we need to change gatsby-config.js to incorporate the new dependencies we've just added. It doesn't have any configuration options so it can just go in as an extra line on the config, in this case I'm adding it after the gatsby-plugin-sharp plugin:

'gatsby-transformer-sharp',
'gatsby-plugin-sharp',
'gatsby-plugin-styled-components',

Don't forget the comma at the end ?

3. Global Style

Now that we're ready to rock n' roll with styled-components we need to remove the currently applied styled in the default starter and apply our own.

In the src/components/layout.js component there's an import for layout.css this is the CSS reset for the starter if we remove the import from here we'll see the styles for border and font be reset. We can now delete the layout.css file and create out own CSS reset using the createGlobalStyle function from styled-components.

Create a new folder theme, in this example it's in src/theme and add a globalStyle.js file in there.

This will export a GlobalStyle component for us to use throughout the app.

Let's add in a Google font and reset the padding and margin, for visual feedback we're going to add the font directly to the body element.

import { createGlobalStyle } from 'styled-components';

export const GlobalStyle = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css?family=Kodchasan:400,700');
  body {
    padding: 0;
    margin: 0;
    font-family: Kodchasan;
  }
  a {
    text-decoration: none;
  }
  ul {
    margin: 0 auto;
    list-style-type: none;
  }
`;

Ok, now we can use the export component here to apply styles globally in the app. So we need to have this as high up the component tree as possible, in this case that is in the layout.js component as it wraps all the pages in this project.

In layout.js import the GlobalStyle component.

import Header from './header';
import { GlobalStyle } from '../theme/globalStyle';

Then add it in with the other components being rendered.

render={data => (
  <>


Ok! Global styled applied, we should now see the font change and the margin around the body of the page change.
Time to use styled-components!
4. Use styled-components
Now let's convert all the inline styles used in the starter to styled-components.
This is the actual styling part, which is moving the existing styles to styled components, working from top to bottom of the file structure, changing:
src/components/header.js
src/components/layout.js
src/pages/index.js
header.js
import React from 'react';
import { Link } from 'gatsby';
import styled from 'styled-components';

const HeaderWrapper = styled.div`
  background: rebeccapurple;
  margin-bottom: 1.45rem;
`;

const Headline = styled.div`
  margin: 0 auto;
  max-width: 960;
  padding: 1.45rem 1.0875rem;
  h1 {
    margin: 0;
  }
`;

const StyledLink = styled(Link)`
  color: white;
  textdecoration: none;
`;

const Header = ({ siteTitle }) => (
  <HeaderWrapper>
    <Headline>
      <h1>
        <StyledLink to="/">{siteTitle}StyledLink>
      h1>
    Headline>
  HeaderWrapper>
);

export default Header;

layout.js
import React from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import { StaticQuery, graphql } from 'gatsby';

import styled from 'styled-components';

import Header from './header';
import { GlobalStyle } from '../theme/globalStyle';

const ContentWrapper = styled.div`
  margin: 0 auto;
  maxwidth: 960;
  padding: 0px 1.0875rem 1.45rem;
  paddingtop: 0;
`;

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <>
        <GlobalStyle />
        <Helmet title={data.site.siteMetadata.title} meta={[{ name: 'description', content: 'Sample' }, { name: 'keywords', content: 'sample, something' }]}>
          <html lang="en" />
        Helmet>
        <Header siteTitle={data.site.siteMetadata.title} />
        <ContentWrapper>{children}ContentWrapper>
      
    )}
  />
);

Layout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default Layout;

index.js
import React from 'react';
import { Link } from 'gatsby';
import styled from 'styled-components';

import Layout from '../components/layout';
import Image from '../components/image';

const ImgWrapper = styled.div`
  max-width: 300px;
  margin-bottom: 1.45rem;
`;

const IndexPage = () => (
  <Layout>
    <h1>Hi peopleh1>
    <p>Welcome to your new Gatsby site.p>
    <p>Now go build something great.p>
    <ImgWrapper>
      <Image />
    ImgWrapper>
    <Link to="/page-2/">Go to page 2Link>
  Layout>
);

export default IndexPage;

5. Done
Thanks for reading
Here's the example code we worked on if you need reference. 

You can read other articles like this on my blog.



 How to Build A Debuggable Styled Component 
freeCodeCamp — Thu, 13 Sep 2018 14:39:55 +0000
 By ChunLin Wu
Styled-components is a CSS-In-JavaScript library. It allows you to write CSS code inside your React JSX files. Life is good when your component’s CSS properties can be dynamically changed with styled-components.
However, there are some drawbacks when you try to debug your styled components. In this article, I’ll introduce to you the pros and cons of building components with traditional CSS and styled-components. Then, I’ll show you an easy method to overcome the flaws of building a styled component. Stay tuned!
Getting started
At first, let’s make a component with a conventional CSS file.
For now, the component looks like the image below.

Pretty Cute huh!?
Make the title “Cute Puppy” another color
Let’s give the Content.jsx a prop. To make it simple, give it a prop called skyblue.
Now, we can change Content.jsx CSS properties based on skyblue. I want to introduce you to two methods to add new CSS properties via general CSS.
Inline Style
As you can see, we take skyblue as the condition to add CSS properties to the style object. We then inject the style object as an inline style. Now the result will look like this…

The color of the title is now sky blue! Now let’s move on to the second method.
Add New CSS Classes
As you know, we made a CSS class called content--skyblue. This is straightforward to make the color sky blue. We want to add this class to the title “Cute Puppy”. What we are doing is making an array to store CSS classes, then using the join method to split classes with space. So now, the className would be like
Cute Puppy . The result will also look the same as the inline-style method.
You can see that it’s not convenient to modify the styles with both of the methods above, especially for those complex UI components. You don’t want to write many condition statements to style your components, right?
So, what are the pros and cons of both inline-style and adding new CSS classes?
Pros

It’s general CSS and vanilla JS — you don’t need to learn new syntax and API.
Easy to debug using browsers’ devtools.

Cons

It’s not flexible to modify inline-style because of CSS specificity. You cannot simply just add a class to override inline-style because inline-style has higher specificity.
It’s not clear to see what classes are included in className via the adding new CSS classes method. When you see this kind of code Cute Puppy , you have to look back at the logic that you added to the classes. That will be a major drawback when you have lots of className to modify.

That’s why I want to introduce you to styled-components.
Styled-components

Use the best bits of ES6 and CSS to style your apps without stress ?


styled-components
Styled-components is a library which makes it easy to modify CSS properties. You can just install it via npm install styled-components --save or yarn add styled-components. Then you can use styled-components to style your components. Let’s take the Cute Puppy as the example.
At first, we need to import styled-components to our component. We import it as a name called styled. Then we can define what HTML element should be used for each styled-component. For example,
const Button = styled.button / CSS Properties / ``
means this Button component stands for the styled-component render a  />. Then we can simply move the CSS properties to each styled-component. That’s it! Just that simple! Now you can see the original version of Cute Puppy.


How about changing the title’s color using styled-components? Styled-components take advantage of JavaScript ES6 template literals. You can pass a function to template literals. That will be helpful when you want to modify CSS properties based on props. Let’s dive deeper into the topic via Cute Puppy.
We pass the prop skyblue to the Title component which was built with styled-components. Then we can simply pass a function to the CSS properties we want to modify via template literals. As you can see, we pass an arrow function props => (props.skyblue ? 'skyblue' : 'black')to determine under what condition should Title’s color be sky blue, and we just finish changing Title’s color!

How About Debugging
Let’s open Chrome Devtools to see what happens when we build a component with styled-components.

What happened on Chrome Devtools
Styled-components have a built-in CSS module system. This is great for solving the problem of classnames conflict. However, we definitely don’t know what classes are we using when we try to debug on Chrome Devtools. Besides, when we check the render function in Content.jsx:
Do you know what HTML element we are using? absolutely not, right? You have to look back at each styled-component to check what HTML element is it using. That is annoying actually. Also, when you build styled-components in this way, basically you just abandon the powerful features of CSS selectors.
Considering the problems above, I want to introduce a simple method to build a debuggable styled-component, which combines general CSS with styled-components.
Combine CSS selectors with Styled-components
At the beginning of this part, I want you to know how to style existing components with styled-components.

The styled method works perfectly on all of your own or any third-party components as well. As long as they pass the className prop to their rendered sub-components, which should pass it too, and so on. Ultimately, the className must be passed down the line to an actual DOM node for the styling to take any effect.

We need to add className to general components and we can style them easily with styled-components. Let’s see how to take advantage of it to build a debuggable styled-component.
We need to wrap Content.jsx via the className prop and we can style it with this pattern:
const StyledContent = styled(Content) / CSS Properties / ``
Then we can wrap any component into the styled-component. In addition, we can also use the power of CSS selectors inside the styled-component. Even more, SCSS syntax is available in styled-components! Let’s see how it happens when we open the console in Chrome Devtools.

Now the classes are meaningful, right? And we still benefit from the built-in CSS module system because of the className prop. To put it simply, you just need to take care of CSS classnames inside the component, then you will be fine ?. Remember how we modify CSS properties via passing a function to styled-components? It still works with this method! Of course, the result will still look like…

Life has never been so beautiful!
Wrap up
We have gone through two methods to style component via traditional CSS. Then we learned how to style components easily with styled-components. In the end, we combined CSS selectors with styled-components. Now components can be easily styled and are also debuggable.
If you want to try out styled-components to style your components, but feel the pain when debugging, I would recommend that you give this method a try.
DEMO
Source Code
You can check the source code of every method on my Github repo

Inline-Style

Add a New Class

Styled-components

Combine CSS Selectors with styled-components


Thank you for reading my article. I hope it didn’t waste your time. If you like this article, please feel free to give me a clap ???. Your claps will motivate me to write more high-quality articles ✍️.
Follow me on Twitter
Follow me on Github
Connect me on LinkedIn
 


 styled-components ? getting started 
freeCodeCamp — Tue, 03 Apr 2018 16:44:00 +0000
 By Scott Spence
We're going to style the basic create react app with styled-components to look something like this:

But first, preamble✨: I have always struggled with styling sites, it seems to be an aspect of starting web development that is either an afterthought or glossed over. Up until December last year I didn't really like styling anything at all with CSS, it was a chore rather than something I enjoyed doing.
This was until I started using styled-components, when I joined a build to learn project for a Chingu voyage (grad.then() if you're interested) we decided to use a CSS-in-JS package, Marina who was on my team was such an inspiration for me watching how components were styled and really gave me the confidence to start using styled-components.
me with css before

I want to share what I have learned so far by going through styling a basic react application.
There's some basic CSS concepts in this post that I was not aware of before starting out with styled-components that I presume are assumed in styling web pages.
Styling the body element of a site is assumed, so for when you are starting out with a blank canvas there are some defaults for all modern web browsers you add to your site, like leaving font size at 16px (or 1rem) or box-sizing: border-box; there's some packages out there to take care of this for you as well.
Install styled-components
Ok let's bootstrap the basic react application you get when using Create React App with npx, if you already have Create React App installed globally then you can use the command without npx.
npx create-react-app style-with-styled-components
cd style-with-styled-components/
npm i styled-components

Ok, now we have the basic app we can style, thankfully Dan has kindly provided the starting styles for us so let's begin my using them with styled-components.
The way the CRA CSS is laid out, assumes that you will have a corresponding CSS file for each component, which can help with maintaining the CSS and lends to the React idea of having all your files separated into their component parts.
We can start with the App.js file and it's accompanying App.css file. Let's take a look at the App.js first:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to Reacth1>
        header>
        <p className="App-intro">
          To get started, edit <code>src/App.jscode> and save to reload.
        p>
      div>
    );
  }
}
export default App;

In styled-components we'd create components for each of these elements that replace the aforementioned className's. Ok we can start by migrating our styles into components, let's do one component first to get an idea of where we're going with this.
First, import styled into the App.js module:
import styled from 'styled-components';

Now let's look at 
, it's the top level div for this component and is what I like to call the wrapper for the component. So let's give it an imaginative name AppWrapper.
Referring to the App.css there is text-align: center; which belongs to this, so:
const AppWrapper = styled.div`
  text-align: center;
`;

So here we have defined the AppWrapper const as a styled.div followed by back ticks inside of the back ticks we can write any regular CSS with the exact same CSS syntax you wold in a normal .css file.
Now that we have our AppWrapper we can replace the top level div on the App.js component.
import React, { Component } from 'react';
import styled from 'styled-components';
import logo from './logo.svg';
import './App.css';
class App extends Component {
  render() {
    return (
      <AppWrapper>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to Reacth1>
        header>
        <p className="App-intro">
          To get started, edit <code>src/App.jscode> and save to reload.
        p>
      AppWrapper>
    );
  }
}
export default App;

styled-components all the things
So let's do that for the remaining four CSS classes, and take a look, I'll define them underneath the AppWrapper here:
const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;
const AppLogo = styled.img`
  animation: ${rotate360} infinite 120s linear;
  height: 80px;
`;
const AppHeader = styled.div`
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
`;
const AppTitle = styled.h1`
  font-size: 1.3em;
`;
const AppIntro = styled.p`
  font-size: large;
`;

So first off we've created a variable for the React svg animation, you'll need to import the keyframes helper from styled-components like so:
import styled, { keyframes } from 'styled-components';

this can now be used throughout the App.js component and we can add an on hover selector to any of our styled-components within this module. Here we're going to add it to the AppLogo to keep the super sweet rotating React logo.
const AppLogo = styled.img`
  animation: ${rotate360} infinite 120s linear;
  height: 80px;
  &:hover {
    animation: ${rotate360} infinite 1.5s linear;
  }
`;

Ok, our app shouldn't look any different as we haven't added in our styled-components to the app render() method, so let's do that now.
Let's also change the intro text. You can add a wrapper for the  tags something like:

const CodeWrapper = styled.code`
  font-size: 1.3rem;
`;

But if you prefer you can nest selectors within the component, like:
const AppIntro = styled.p`
  color: ${props => props.theme.dark};
  font-size: large;
  code {
    font-size: 1.3rem;
  }
`;

Let's have a look at the render() method now…
render() {
  return (
    <AppWrapper>
      <AppHeader>
        <AppLogo src={logo} alt="logo" />
        <AppTitle>Welcome to ReactAppTitle>
      AppHeader>
      <AppIntro>
        Bootstrapped with <code>create-react-appcode>.
      AppIntro>
      <AppIntro>
        Components styled with <code>styled-componentscode>{' '}
        <EmojiWrapper aria-label="nail polish">EmojiWrapper>
      AppIntro>
    AppWrapper>
  )
}

Now all the classes originally used in App.js have been replaced so there's no need for the import './App.css' mapping, remove that aaaaand! Still no change!! Which is a good thing because at the moment we're swapping out the .css files for styled-components.
Cool, we have now replaced all the css with styled-components, now we can take a look at injectGlobal.
Let's take a look at how the App.js file should look before we move on:
import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';
import logo from './logo.svg';

const AppWrapper = styled.div`
  text-align: center;
`;

const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const AppLogo = styled.img`
  animation: ${rotate360} infinite 120s linear;
  height: 80px;
  &:hover {
    animation: ${rotate360} infinite 1.5s linear;
  }
`;

const AppHeader = styled.div`
  background-color: #222;
  height: 12rem;
  padding: 1rem;
  color: white;
`;

const AppTitle = styled.h1`
  font-weight: 900;
`;

const AppIntro = styled.p`
  font-size: large;
  code {
    font-size: 1.3rem;
  }
`;

const EmojiWrapper = styled.span.attrs({
  role: 'img',
})``;

class App extends Component {
  render() {
    return (
      <AppWrapper>
        <AppHeader>
          <AppLogo src={logo} alt="logo" />
          <AppTitle>Welcome to ReactAppTitle>
        AppHeader>
        <AppIntro>
          Bootstrapped with <code>create-react-appcode>.
        AppIntro>
        <AppIntro>
          Components styled with <code>styled-componentscode> <EmojiWrapper aria-label="nail polish" />
        AppIntro>
      AppWrapper>
    );
  }
}

export default App;

Style the body with injectGlobal
For styling the body of our react app we currently have the index.css file that is being imported into the mounting point of our app in the index.js file.
To style the body we can use injectGlobal from styled-components which adds the styles directly to the stylesheet.
To do this you bring in the injectGolabl named export from styled-components and add your styles between the back ticks.
The current index.css looks like this:
body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

Let's add a theme folder in the src directory and add a globalStyle.js file where we can keep all our styles we want to use throughout the app, keeping the styles on one place will make changes simpler.
In src/theme/globalStyle.js we'll need to import the injectGlobal named export from styled-components and add the index.css styles into it:
import { injectGlobal } from 'styled-components';

injectGlobal`
  body {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
  }
`;

Ok, now we're adding the body style to the stylesheet directly so there is no need for the index.css file mapping that is in index.js it should look like this now:
import React from 'react' import ReactDOM from 'react-dom'

import App from './App'

import registerServiceWorker from './registerServiceWorker'

ReactDOM.render(<App />, document.getElementById('root'))

registerServiceWorker()

We should still have our nice sans-serif font going on, but let's add in some nice Roboto for the body and Montserrat for the heading in our globalStyle.js module. We can import Google fonts with an @import in injectGlobal and apply Roboto to the body:
injectGlobal`
  @import url(‘https://fonts.googleapis.com/css?family=Montserrat|Roboto');

  body {
    padding: 0;
    margin: 0;
    font-family: Roboto, sans-serif;
  }
`;

Cool now we can add our imported font for or app header, and there's the option if we want all our 
's to use the same font we can add that to the injectGlobal in our globalStyle.js module.
injectGlobal`
  @import url(‘https://fonts.googleapis.com/css?family=Montserrat:400,900|Roboto');
  body {
    padding: 0;
    margin: 0;
    font-family: Roboto, sans-serif;
  }
  h1 {
    font-family: Montserrat;
  }
`;

Then we can adjust the weight on the AppTitle component:
const AppTitle = styled.h1`
  font-weight: 900;
`;

To add the additional styles for fonts like Montserrat and Roboto you can specify them in the @import url() you'll notice that Montserrat has :400,900 after it that is specifying the styles regular (400) and black (900), you can import as many as you like from Google fonts (CDN) but the more you import the longer it will take to load them, if you have a lot of fonts and styles you want in your app then consider adding them to a folder in the project, like:
import Montserrat from './fonts/Montserrat-Regular.ttf';

injectGlobal`@font-face { font-family: Montserrat; src: url(${Montserrat}); }`;

Theming
Themes are often used to change the look and feel of a wide range of things at once. For example, you may have a night and day mode like in Twitter. You can create your own themes in styled-components too.

Use the styled-components ThemeProvider
Now say we want to have several components in our app that use a CSS colour property color: #6e27c5 instead of hard coding it through the app for every component that uses it we can use the styled-components ThemeProvider.
For this we will need to import the ThemeProvider named export from styled-components, then define a theme object where our colour is going to live:
export const theme = {
  primary: '#6e27c5',
};

Let's add the newly created theme to the globalStyle module we created previously.
To make the theme object available throughout the app component we'll wrap our app component in the ThemeProvider and import our awesome theme for use in the ThemeProvider:
import React, { Component } from 'react';
import styled, { keyframes, ThemeProvider } from 'styled-components';
import logo from './logo.svg';
import { theme } from './theme/globalStyle';

// our styled-components

class App extends Component {
  render() {
    return <ThemeProvider theme={theme}>{/* all children can access the theme object */}ThemeProvider>;
  }
}
export default App;

Now the theme properties can be used as props in our styled-components, let's change the background-color: in the AppHeader component, whilst we're at it let's add a dark: #222 property to our theme object and use that for the color property:
const AppHeader = styled.div`
  height: 12rem;
  padding: 1rem;
  color: ${props => props.theme.dark};
  background-color: ${props => props.theme.primary};
`;

Now we can change our app theme globally
Ok cool, can you change theme?
This is what I was thinking and it turns out you can, there's a great Stack Overflow answer from Max on it.
It got me thinking if you can switch between themes rather than define them for different sections like in the SO answer.
I started off by defining two themes (with imaginative names) in the globalStyle.js module:
export const theme1 = {
  primary: '#ff0198',
  secondary: '#01c1d6',
  danger: '#eb238e',
  light: '#f4f4f4',
  dark: '#222',
};

export const theme2 = {
  primary: '#6e27c5',
  secondary: '#ffb617',
  danger: '#f16623',
  light: '#f4f4f4',
  dark: '#222',
};

Now we need a way to switch between the two theme objects, let's use a select box for them, let's create a components folder and in there make a ThemeSelect.js component, we can worry about refactoring the App.js component when I'm not here :
ThemeSelect.js
import React from 'react';
import styled from 'styled-components';

const Select = styled.select`
  margin: 2rem 0.5rem;
  padding: 0rem 0.5rem;
  font-family: Roboto;
  font-size: 1rem;
  border: 1px solid ${props => props.theme.light};
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  background: ${props => props.theme.light};
  border-radius: 2px;
`;

export const SelectOpt = styled.option`
  font-family: Roboto;
  font-size: 1rem;
`;

class ThemeSelect extends React.Component {
  render() {
    return (
      <div>
        <Select onChange={e => this.props.handleThemeChange(e)}>
          <SelectOpt value="theme1">Theme 1SelectOpt>
          <SelectOpt value="theme2">Theme 2SelectOpt>
        Select>
      div>
    );
  }
}

export default ThemeSelect;

You've probably noticed the onChange={e => this.props.handleThemeChange(e) event, we're going to add that method to the App.js component along with some state to manage what theme is selected.
App.js
import React, { Component } from 'react';
import styled, { keyframes, ThemeProvider } from 'styled-components';

import logo from './logo.svg';

import { theme1, theme2 } from './theme/globalStyle';
import ThemeSelect from './components/ThemeSelect';

// our lovely styled-components here

class App extends Component {
  state = {
    theme: theme1,
  };
  handleThemeChange = e => {
    let theme = e.target.value;
    theme === 'theme1' ? (theme = theme1) : (theme = theme2);
    this.setState({ theme });
  };
  render() {
    return (
      <ThemeProvider theme={this.state.theme}>
        <AppWrapper>
          <AppHeader>
            <AppLogo src={logo} alt="logo" />
            <AppTitle>Welcome to ReactAppTitle>
          AppHeader>
          <AppIntro>
            Bootstrapped with <code>create-react-appcode>.
          AppIntro>
          <AppIntro>
            Components styled with <code>styled-componentscode> <EmojiWrapper aria-label="nail polish" />
          AppIntro>
          <ThemeSelect handleThemeChange={this.handleThemeChange} />
        AppWrapper>
      ThemeProvider>
    );
  }
}

export default App;

To summarise what we have done with App.js here is, add some state to default to theme1 where the two themes are imported as named exports of the globalStyle.js module.
Add a method to handle the change of the ThemeSelect.js component handleThemeChange this is where we can switch between the two theme objects.
Let's try it out, we should be able to switch between the two themes we've defined now.
Extending styled-components
So far our app hasn't got many styled-components that are similar but what if we were to add some buttons…
export const Button = styled.button`
  font-size: 1rem;
  border-radius: 5px;
  padding: 0.25rem 1rem;
  margin: 0 1rem;
  background: transparent;
  color: ${props => props.theme.primary};
  border: 2px solid ${props => props.theme.primary};
  ${props =>
    props.primary &&
    css`
      background: ${props => props.theme.primary};
      color: white;
    `};
`;

Here I've added a Button component to the globalStyle.js for us to use in the App.js component. For the sake of convenience we're going to add it here, you may find if you have a lot of similar components that you are reusing throughout your app that it may be a good idea to add them all to a components folder.
We can import the Button as you would any other component and use it in the module, as we're extending it this means we only need to apply the specific styles we want for that button. But first in the App.js component we can specify a normal and a primary button:
<button>Normal Buttonbutton> <button primary>Primary Buttonbutton>

Now to specify another button with the same css as the imported button we can extend it, like in this example we'll make the button take up 40% of the screen width and make the corners more rounded:
const BigButt = Button.extend`
  height: 3rem;
  font-size: 2rem;
  width: 40vw;
  border-radius: 30px;
`;

Let's also apply the theme for an underline on create-react-app and styled-components by adding in an Underline styled-component:
const Underline = styled.span`
  border-bottom: 4px solid ${props => props.theme.secondary};
`;

Now we can switch the theme and have it applied to our components using the theme, pretty neat, right?
I have put all of the examples we have gone over here in a working example for you to play around with the theming and styled-components, enjoy.
https://codesandbox.io/s/x26q7l9vyq?from-embed
Want to know more?
A great resource for getting started with styled-components which really helped me is Simon Vrachliotis's egghead.io styled-components playlist which is a great foundation for starting out with styled-components ? the first lesson is for pro members but the rest are currently available to watch for free.
There's also the spectrum.chat community and of course Stack Overflow.
Thanks for reading
If there is anything I have missed, or if you have a better way to do something then please let me know.
Find me on Twitter or Ask Me Anything on GitHub.

You can read other articles like this on my blog.

styled-components - freeCodeCamp.org

How to Use Styled Components in Your React Apps

Prerequisites

How to Create a Basic React App

Let's Style Our First Component

Styled Components

Styled Components

Styled Components

Styled Components

Styled Components

Styled Components

Styled Components

Styled Components

Another heading

Heading 2

Heading 2

Hello World!!!

Hello World!!!

React + WebSockets Project – Build a Real-Time Order Book Application

GitHub Repo

What is an Order Book?

Why Would I Need an Order Book?

The Plan for our Order Book App

Application Features

Order book

Grouping Select Box

Toggle Feed Button

Kill Feed Button

Status Message

Tech Stack for our App

How to Build the App

Project Structure

Rendering Performance

How to Build the UI with React and styled-components

Responsiveness and Page Visibility Detection

Window Size Detection

State Management with Redux

Websocket Protocol (WSS)

A Few Words About My Implementation

Grouping

How to Perform Unit Tests on the App

How to Deploy the App to Vercel

How to Add a Build Badge on GitHub

Wrapping Up

Rendering Performance

Grouping Functionality

Space for Improvement

References

How to Style Your React Apps with Less Code Using Tailwind CSS, Styled Components, and Twin Macro

Why use it?

Setting up

Configuring Tailwind CSS

Tailwind CSS and Styled Components

Conclusion

Resources

React Native Styling: Styled Components, Flexbox Layouts, and More

Flexbox Layouts

Styled Components

Libraries for Styling

You Don't Need CSS-in-JS: Why (and When) I Use Stylesheets Instead

Solving problems you don’t need to solve

So what do you want me to use?

What CSS-in-JS is good at…

Helping large teams preserve sanity

Kind of eliminates the need to learn CSS (kind of)

What can both do?

Hot Module Reloading (HMR)

Variables, Global Settings

Encapsulation

Linting

A lot more

What stylesheets and SASS do better…

Rule sharing and configuration

Responsive design

Less complexity of your components

Performance

At the end of the day, do what’s effective

Styled Components: The Essentials Explained in 3 Steps

1. How to create and use a Styled Component

2. How to modify your CSS conditionally with props.