How To Start With GatsbyJS – part 2: Typography as Dynamic Component

Share

This article is part 2 of “How to start with Gatsby JS” series.

Step 5. Typography – Dynamic Component and Styled System

Regarding typography, first I think about creating a component for each style of text and import it as needed.

However, not every text style has the same HTML tag. Preparing several of the same text styles with other tags seems not to be the best solution.

Fortunately, Dynamic Component allows you to apply any HTML element to the component.

To create Typography, use Styled System – responsive, theme-based style props for building design systems with React. Styled System works with Styled Component and the most other css-in-js libraries.

First step is to install system-styled via yarn. Please run this command in terminal:

$ yarn add styled-system

Create DynamicComponent.js in global directory.

Import style functions needed from styled-system and add them to the component’s styles argument. This component will have four style props available: fontSize, color, fontWeight and lineHeight.

global/DynamicComponent.js

import styled from 'styled-components';
import {
  lineHeight,
  fontSize,
  color,
  fontWeight,
} from 'styled-system';

const StyledDynamicComponent = styled.p`
  ${lineHeight}
  ${fontSize}
  ${color}
  ${fontWeight}
`;

export default StyledDynamicComponent;

By default I set my StyledDynamicComponent as paragraph.

Go to theme/index.js and create textStyles object (in the existing theme object) including styles for your heading and text style. With the ThemeProvider added, the StyledDynamicComponent has access to properties defined in the textStyles object.

textStyles: {
  heading1: {
    fontSize: ['32px', '42px', '52px'],
    color: '#000',
    fontWeight: 800,
  },  
  textStyle1: {
    fontSize: '16px',
    color: '#000',
    fontWeight: 400,
    lineHeight: '1.4',
  },
},

All styled-system functions accept arrays as values to set styles responsively using a mobile-first approach. In the fourth step (about Media Queries) of this tutorial I’ve defined the breakpoints array. Now fontSize array will set font-size on the corresponding screen width.

Now it’s time to create a heading and text style component using DynamicComponent. Go to components/Typography/index.js

import styled from 'styled-components'
import DynamicComponent from '../../global/DynamicComponent';
import theme from '../../theme';

const {
  heading1,
  textStyle1
} = theme.textStyles;

const createTypoComponent = props => {
  const TypoComponent = styled(DynamicComponent)``

  TypoComponent.defaultProps = {
    ...props,
  };

  return TypoComponent
};

export const Heading1 = createTypoComponent(heading1);
export const TextStyle1 = createTypoComponent(textStyle1);

Let’s render Heading with h1 tag using ‘as’ and TextStyle with default paragraph.

pages/index.js

import { Heading1, TextStyle1 } from '../components/Typography';

const IndexPage = () => (
  <ThemeProvider theme={theme}>
    <Layout>
      <Header/>
      <Heading1 as="h1">This is Heading1 with H1 tag</Heading1>
      <TextStyle1>This is TextStyle1 with p tag by default</TextStyle1>
    </Layout>
  </ThemeProvider>
);

As a result, you received a responsive component with the ability to control the tag.

Dynamic Component

You can override your theme styled value or add the new property as well.

<TextStyle1 color="#fff" bg="#744c9d">This is TextStyle1 with p tag</TextStyle1>

The result:

Override theme styled values

Finally, add Typography to stories.
Typography/index.stories.js

import React from 'react';
import { storiesOf } from '@storybook/react';

import { Heading1, TextStyle1 } from '../Typography';

storiesOf('Typography', module)
  .add('headings', () => (
    <Heading1>Heading1</Heading1>
  ))
  .add('text styles', () => (
    <TextStyle1>TextStyle1</TextStyle1>
  ));

And check your Storybook:

Typography in Storybook

To be continued…

That’s it for now.

In the last part, you will learn about Gatsby Image.

Comments
    Leave a Reply

    View Comments (0)...

    Related articles:

    What is JAMstack?

    How To Start With GatsbyJS – part 3: Gatsby Image