Simple HTML primitives build by using styled-components
npm install --save primitives-react
or
yarn add primitives-react
// @flow
import { Flex } from "primitives-react";
import type Flex from "primitives-react";
or
// @flow
import Flex from "primitives-react/Flex";
import type Flex from "primitives-react/Flex";
Border box component with adjustable margin.
- marginTop
- marginBottom
- marginLeft
- marginRight
- marginVertical - sets top and bottom margin, if they are not specified
- marginHorizontal - sets left and right margin, if they are not specified
<Margin marginTop={10} marginHorizontal={20}>
<span>Content</span>
</Margin>
Extends Margin with properties of flexbox
- x - horizontal axis
justify-content
property - y - vertical axis
align-items
propery - direction -
flex-direction
- flex
- space - right margin of each child except last one
<Flex x="space-between" direction="column">
<Flex flex={1}>Item 1</Flex>
<Flex flex={3}>Item 2</Flex>
</Flex>
- flex-wrap
- order
- justify-self
- align-self
Border box component with adjustable margin.
- paddingTop
- paddingBottom
- paddingLeft
- paddingRight
- paddingVertical - sets top and bottom padding, if they are not specified
- paddingHorizontal - sets left and right padding, if they are not specified
<Padding paddingTop={10} paddingHorizontal={20}>
<span>Content</span>
</Padding>
Inline block span component
- fontSize
- lineHeight
- marginTop
- marginBottom
- color
<Line fontSize={16} color="pink">
Content
</Line>
Extends Margin with addition height property
- height
<Box height={300} marginHorizontal={30}>
<span>Content</span>
</Box>
Extends Margin with addition properties
- height
- fontSize
- lineHeight
- color
<BoxLine color="#123" height={300} marginHorizontal={30}>
<span>Content</span>
</BoxLine>