React Elemental

Overview

React Elemental is a modern, flat UI library built specifically for React. It is designed to maximize development velocity by eliminating the need to import CSS or modify any Webpack configurations. React Elemental provides first-class support for ES6/JSX and seamlessly integrates with server-side rendering.

Features

• Flat UI library built for React
• No CSS import or additional Webpack configuration needed
• First-class support for ES6/JSX
• Works effortlessly with server-side rendering
• Provides a range of UI components
• Easily customizable with override options for fonts and colors
• Optional Babel plugin available for reducing bundle size
• Simple development workflow with auto-transpilation and auto-rebuilding

Installation

To install React Elemental, follow these steps:

1. Make sure you have React already installed in your project.

2. Run the following command to install React Elemental:

npm install react-elemental

3. Once installed, you can import and use the UI components in your React code:

import { Button, Input } from 'react-elemental';

// Example usage
const MyComponent = () => (
  <div>
    <Button text="Click me!" />
    <Input placeholder="Enter your name" />
  </div>
);

4. Optionally, you can bootstrap the library to set configuration globals:

a. Declaratively using the Elemental component:

import { Elemental } from 'react-elemental';

// Example usage
const App = () => (
  <Elemental fontOpts={{/* primary: 'url(path/to/font-regular.ttf)', secondary: 'url(path/to/font-bold.ttf)' */}}>
    <MyComponent />
  </Elemental>
);

b. Imperatively using the bootstrap function:

import { bootstrap } from 'react-elemental';

// Example usage
bootstrap({ primary: 'url(path/to/font-regular.ttf)', secondary: 'url(path/to/font-bold.ttf)' });

// Continue rendering components

Summary

React Elemental is a powerful UI library for React that offers a modern and flat design. It provides an effortless development experience by eliminating the need for importing CSS or modifying Webpack configurations. With support for ES6/JSX and server-side rendering, React Elemental offers a wide range of customizable UI components. Its installation process is straightforward, and it provides options for configuring global constants and reducing bundle size. In development, React Elemental offers a streamlined workflow with auto-transpilation and auto-rebuilding capabilities.