Simple React UI component set
npm install midnight-shadowBased on Rebass these components can be used in React projects with styled components.
First, install the package:
``npm i midnight-shadow`
`
import React from 'react'
import { Flex, Box, Text } from 'midnight-shadow'
export default props =>
There are three UI components: Flex, Box, and Text
Which mostly work like the Rebass versions:
- Box
- Flex
- Text
| Prop name | CSS val |
| --------------- | --------------- |
| width | 'width' |
| height | 'height' |
| minHeight | 'min-height' |
| maxHeight | 'max-height' |
| minWidth | 'min-width' |
| maxWidth | 'max-width' |
| px | 'padding-left' |
| px | 'padding-right' |
| py | 'padding-top' |
| py | 'padding-bottom' |
| pt | 'padding-top' |
| pb | 'padding-bottom' |
| pl | 'padding-left' |
| pr | 'padding-right' |
| m | 'margin' |
| mx | 'margin-left' |
| mx | 'margin-right' |
| my | 'margin-top' |
| my | 'margin-bottom' |
| mt | 'margin-top' |
| mb | 'margin-bottom' |
| ml | 'margin-left' |
| mr | 'margin-right' |
| bg | 'background' |
| position | 'position' |
| borderRadius | 'border-radius' |
| textAlign | 'text-align' |
| textTransform | 'text-transform' |
| textDecoration | 'text-decoration' |
| flex | 'flex' |
| flexDirection | 'flex-direction' |
| flexWrap | 'flex-wrap' |
| justifyContent | 'justify-content' |
| alignItems | 'align-items' |
| alignContent | 'align-content' |
| fontFamily | 'font-family' |
| fontSize | 'font-size' |
| fontWeight | 'font-weight' |
| lineHeight | 'line-height' |
| letterSpacing | 'letter-spacing' |
| color | 'color' |
| sx | general styles |
Each prop takes either a string or an array of strings. Arrays are used for breakpoints:
``
const breakpoints = {
sm: '576px',
md: '768px',
lg: '992px',
}
eg.,
``
General styles can be added like below:
``
You can also pass an array of values for breakpoints into general styles like so:
``
You can pass an as prop through each Ui component
``
``
```