Small, simple set of React UI components

Based on Rebass these components can be used in React projects with styled components.

How it works

First, install the package:

npm i midnight-shadow

import React from 'react'
import { Flex, Box, Text } from 'midnight-shadow'
 
export default props =>
  <Box width={["100%", "50%", "33%"]}>
    <Text mb="20px" textAlign="center">Hello</Text>
    <Flex bg="#bbeeff" p="10px" justifyContent="center" alignItems="center>Friend</Flex>
  </Box>

What it looks like

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 |

Breakpoints

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.,

<Box mx={["30px", "50px", "100px"]}>...</Box>

General styles

General styles can be added like below:

<Text sx={{'letter-spacing': '0.02rem'}}>...</Text>

You can also pass an array of values for breakpoints into general styles like so:

<Text fontSize={['32px', '44px', '64px']} sx={{'letter-spacing': ['0', '0.01rem', '0.02rem']}}>...</Text>

HTML tags

You can pass an as prop through each Ui component

<Text as="h1">...</Text>

<Flex as="nav">...</Flex>

<Box as="section">...</Box>