styled-rhythm
Box and Line components for maintaining vertical rhythm with ease!
Peer dependencies
react
>= 16.0.0prop-types
>= 15.6.0styled-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 sizebaseLineScale: number
- your line height relative to thebaseFont
To provide the theme, do one of the following:
- provide the
theme
prop directly - use
styled-components
'ThemeProvider
Example
;; const theme = baseFont: 16 baseLineScale: 15; // Prop:const BoxProp = <Box as="button" theme=theme height=25 marginTop=0 marginBottom=1 />; // Theme provider:const BoxProvider = <ThemeProvider theme=theme> <Box as="button" height=25 marginTop=0 marginBottom=1 /> </ThemeProvider>;
Box
Used for box elements such as div
, button
.
Props
as: React.ComponentType<*> | string
- the component to render (defaultdiv
)height: number
- element height relative to the base line heightmarginTop: number
- top margin relative to the base line heightmarginBottom: number
- bottom margin relative to the base line height
Example
; const Button = <Box as="button" height=25 marginTop=0 marginBottom=1 ...props />;
Line
Used for text elements such as span
, a
.
Props
as: React.ComponentType<*> | string
- the component to render (defaultspan
)fontSize: number
- font size relative to the base font sizemarginTop: number
- top margin relative to the base line heightmarginBottom: number
- bottom margin relative to the base line heightborder?: number
- any extra borders the component will have in pixels
Example
; const Link = <Line as="a" fontSize=12 marginTop=05 marginBottom=05 ...props />;
License
MIT