react-beautiful v2.4.0

React Beautiful - Boost up your React components

This project create new React components and add some useful feature to Material components without touch the core base components.

#Demo If you want try the components, you can see the demo on official website! I'm working on live demo based on Storybook, give me little more time :)

Installation

React beautiful is available as an npm package.

// With npm
npm install react-beautiful

// With yarn
yarn add react-beautiful

Usage

You can use destructuring or tree shaking approach. Here is a quick example to get you started, it's all you need:

import React from 'react';
import ReactDOM from 'react-dom';
import { Dialog, Image } from 'react-beautiful';

function App() {
  return (
    <React.Fragment>
      <Image height={180} src="http://..." grayed />
      <Dialog
        open
        title="Custom title"
        description="Custom description"
        showClose
      />
    </React.Fragment>
  );
}

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

Components

React Beautiful have several components:

Dialog

You can use all Material Dialog props, but you can pass other props for render a complete Dialog component without include many others components like DialogContent, DialogContentText and so on. Moreover: this component enable full screen mode automatically for small screen (thanks to withMobileDialog Material HOC) and provide an icon button for close the Dialog. The props are:

See the demo!.

Image

Image component is an easy and useful component for create a responsive image box with optionally grayed filter. The component's props are:

See the demo!.

Snackbar

Snackbar component accept all Material Snackbar props, but you can pass other props for render a complete Snackbar component:

See the demo!.

Highlight Card

Highlight Card component is a horizontal card with all you need to show a consistent and clear card. The component's props are:

See the demo!.