# react-bella

> A beautiful React component library

Latest version **1.2.3** (published 2020-01-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-bella
pnpm add react-bella
yarn add react-bella
bun add react-bella
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score; declining downloads.

## Facts

| | |
|---|---|
| Version | 1.2.3 |
| Published | 2020-01-08 |
| First published | 2019-09-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 127.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | alcuin |

## Links

- npm: https://www.npmjs.com/package/react-bella
- Repository: https://github.com/24dev/react-bella
- Homepage: https://github.com/24dev/react-bella#readme
- Issues: https://github.com/24dev/react-bella/issues
- npm.io page: https://npm.io/package/react-bella

## Recent versions

- 1.2.3 (latest) — 2020-01-08
- 1.2.2 — 2019-11-30
- 1.2.1 — 2019-11-09
- 1.2.0 — 2019-10-27
- 1.1.9 — 2019-10-26
- 1.1.8 — 2019-10-23
- 1.1.7 — 2019-10-19
- 1.1.6 — 2019-10-18
- 1.1.5 — 2019-10-18
- 1.1.4 — 2019-10-18
- 1.1.3 — 2019-10-18
- 1.1.2 — 2019-10-17
- 1.1.1 — 2019-10-17
- 1.1.0 — 2019-10-17
- 1.0.9 — 2019-10-17
- … 9 more at https://npm.io/package/react-bella/versions

## README

<h1 align="center">
  <img src="assets/bella.png?raw=true" width="250" align="center" alt="react bella logo">
</h1>

<div align="center">

A new React component library for a cleaner, more beautiful web. Incredibly light and easy to use. Built for 2019, with Typescript.<br />
Made with 🔥 in the UK. 

</div>

## 💻 Installation

```sh
npm install react-bella
```

## 🚀 Usage

Here is a quick example to get you started, **it's all you need**:

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Text, Flex} from 'react-bella';

function App() {
  return (
    <Flex justifyContent="center">
      <Text type="h1" color="blue">Bella</Text>
    </Flex>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));
```

## 📚 Components

<b>Flex</b> (for flexible, dynamic divs)
```jsx
<Flex justifyContent>
  {...children}
</Flex>

justifyContent: oneOf(['center', 'flex-start', 'flex-end', 'space-between', 'space-evenly']). Default is 'space-between'.
children: any
```

<b>Text</b> (for all kinds of text)
```jsx
<Text type>
  {...children}
</Text>

type: oneOf(['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']). Default is 'span'.
children: any
```

<b>Space</b> (forget margins)
```jsx
<Space size>
  {...children}
</Space>

size: oneOf(['xs', 'sm', 'md', 'lg', 'xl']). Default is 'md'.
children: any
```

<b>Button</b> (buttons)
```jsx
<Button theme>
  {...children}
</Button>

theme: oneOf(['primary', 'outline', 'invisible']). Default is 'invisible'.
children: any
```


## Roadmap

Currently in development. Once a complete, stable release is ready, we will announce.

## License

This project is licensed under the terms of the
[MIT license](/LICENSE).

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