# midnight-shadow

> Simple React UI component set

Latest version **1.2.2** (published 2024-01-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install midnight-shadow
pnpm add midnight-shadow
yarn add midnight-shadow
bun add midnight-shadow
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2024-01-25 |
| First published | 2023-04-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 13.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Midnight |
| Maintainers | ykwx |
| Keywords | react, ui, component, styled-components |

## Links

- npm: https://www.npmjs.com/package/midnight-shadow
- npm.io page: https://npm.io/package/midnight-shadow

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.9

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.2.2 (latest) — 2024-01-25
- 1.2.1 — 2024-01-22
- 1.2.0 — 2024-01-22
- 1.1.9 — 2023-04-17
- 1.1.8 — 2023-04-13
- 1.1.7 — 2023-04-13
- 1.1.6 — 2023-04-12
- 1.1.5 — 2023-04-12
- 1.1.4 — 2023-04-12
- 1.1.3 — 2023-04-05
- 1.1.2 — 2023-04-05
- 1.1.1 — 2023-04-05
- 1.1.0 — 2023-04-05
- 1.0.24 — 2023-04-05
- 1.0.23 — 2023-04-04
- … 22 more at https://npm.io/package/midnight-shadow/versions

## README

# Small, simple set of React UI components

Based on [Rebass](https://www.npmjs.com/package/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](https://rebassjs.org/box)
- [Flex](https://rebassjs.org/flex)
- [Text](https://rebassjs.org/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>
```

---
_Source: https://npm.io/package/midnight-shadow · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._