midnight-shadow v1.2.2

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

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>