Example of a component with styled components in defaultProps

Theming guidelines — Part 6 —React defaultProps Example

Marcel Mokos
Jan 18, 2019 · 3 min read

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.

Image for post
Image for post

Example — Part #1

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
  • install new dependencies
@emotion/core@emotion/styled
Image for post
Image for post
Image for post
Image for post
  • 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
Image for post
Image for post
  • now you are presented with a component using render props
Image for post
Image for post

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)
Image for post
Image for post
Image for post
Image for post

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.

ableneo Technology

Application Development, Data Science, Experience Platforms

Marcel Mokos

Written by

I'm fanatic to next generation Javascript lambda, yield, async/await everything. I admire typescript and flow types. Javascript will ultimately rule the world.

ableneo Technology

Application Development, Data Science, Experience Platforms

Marcel Mokos

Written by

I'm fanatic to next generation Javascript lambda, yield, async/await everything. I admire typescript and flow types. Javascript will ultimately rule the world.

ableneo Technology

Application Development, Data Science, Experience Platforms

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store