styled-rhythm

Box and Line components for maintaining vertical rhythm with ease!

Peer dependencies

• react >= 16.0.0
• prop-types >= 15.6.0
• styled-components >= 2.2.0

API

The entire package is just two components. You must provide them with a theme with these two fields:

• baseFont: number - your base font size
• baseLineScale: number - your line height relative to the baseFont

To provide the theme, do one of the following:

• provide the theme prop directly
• use styled-components' ThemeProvider

Example

import { Box } from 'styled-rhythm';
import { ThemeProvider } from 'styled-components';
 
const theme = {
  baseFont: 16,
  baseLineScale: 1.5,
};
 
// Prop:
const BoxProp = () => (
  <Box
    as="button"
    theme={theme}
    height={2.5}
    marginTop={0}
    marginBottom={1}
  />
);
 
// Theme provider:
const BoxProvider = () => (
  <ThemeProvider theme={theme}>
    <Box
      as="button"
      height={2.5}
      marginTop={0}
      marginBottom={1}
    />
  </ThemeProvider>
);

Box

Used for box elements such as div, button.

Props

• as: React.ComponentType<*> | string - the component to render (default div)
• height: number - element height relative to the base line height
• marginTop: number - top margin relative to the base line height
• marginBottom: number - bottom margin relative to the base line height

Example

import { Box } from 'styled-rhythm';
 
const Button = props => (
  <Box
    as="button"
    height={2.5}
    marginTop={0}
    marginBottom={1}
    {...props}
  />
);

Line

Used for text elements such as span, a.

Props

• as: React.ComponentType<*> | string - the component to render (default span)
• fontSize: number - font size relative to the base font size
• marginTop: number - top margin relative to the base line height
• marginBottom: number - bottom margin relative to the base line height
• border?: number - any extra borders the component will have in pixels

Example

import { Line } from 'styled-rhythm';
 
const Link = props => (
  <Line
    as="a"
    fontSize={1.2}
    marginTop={0.5}
    marginBottom={0.5}
    {...props}
  />
);

License

MIT