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.
Example — Part #1
- Start with opening https://codesandbox.io/
- install new dependencies
@emotion/core@emotion/styled
- 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
- 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)
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.