Example of a component with styled components in defaultProps

Theming guidelines — Part 6 —React defaultProps Example

The previous article was about explaining why you should use components in defaultProps, now we try to create one as an example.

Improve how you style React apps —  Use components in defaultProps

Photo by Jazmin Quaynor on Unsplash

Build a simple week calendar

Let’s assume we have a task to create a calendar that will display day names in header and boxes with actual appointments below.

Everything should start with a sketch

The minimal representation would be a bunch of headers and some other elements under each header.

Sketch of the minimal representation

Example — Part #1

create new react sandbox
create a new folder called “components”
Create a new file called Calendar.js
  • install new dependencies
@emotion/core @emotion/styled
Install dependencies
  • add the following content to the Calendar.js file
import React from "react";
import styled from "@emotion/styled";
import { css } from "@emotion/core"; const Calendar = ({ children, ...props }) => children(props); Calendar.defaultProps = {
children: () => <h1>Calendar</h1>
}; export default Calendar;
  • click on change on Current Model View
Click on the Orange toggle
  • now you are presented with a component using render props

Example — Part #2

From the sketch you can see components you will need

  • Wrapper of the whole component
  • Column that includes Header and other Box-es with line Item-s
  • Create components
  • Add created components into children function
children: ({ Wrapper, Column, Box, Item, headers }) => (...)
  • create a skeleton from newly created components
  • Change index.js to use Calendar component
  • Copy the children part for Calendar.defaultProps and past it to index.js

Now you have a skeleton in components/Calendar.js and its implementation in index.js.

Result

Example — Part #3

  • Style components, add border and background colors for Item
  • Add some responsivity
  • Finish the look to something like this. (you can use only one color)
Skeleton with styles and colors.
Skeleton should be responsive

Example — Part #4

  • create some example data to display
  • try to change index.js to render a calendar with the example data

Result example implementation with more than can be covered

A full article explaining components in defaultProps

Improve how you style React apps —  Use components in defaultProps

👏Clap, 👂follow for more awesome 💟#Javascript, ⚛️ #React content.


Example of a component with styled components in defaultProps was originally published in ableneo Technology on Medium, where people are continuing the conversation by highlighting and responding to this story.