react-bella v1.2.3

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

💻 Installation

npm install react-bella

🚀 Usage

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

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

Flex (for flexible, dynamic divs)

<Flex justifyContent>
  {...children}
</Flex>

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

Text (for all kinds of text)

<Text type>
  {...children}
</Text>

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

Space (forget margins)

<Space size>
  {...children}
</Space>

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

Button (buttons)

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