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.

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

Calendar.js

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

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