styled-rhythm
Box & Line components for vertical rhythm.
Last updated 3 years ago by oreqizer .
MIT · Original npm · Tarball · package.json
$ cnpm install styled-rhythm 
SYNC missed versions from official npm registry.

styled-rhythm

Build Status codecov npm styled with prettier

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

Current Tags

  • 1.0.0                                ...           latest (3 years ago)

3 Versions

  • 1.0.0                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
  • 0.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 0
Dependencies (1)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |