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:

Property | Type | Description ---|---|--- title | string or node | Set Dialog title by DialogTitle component titleClassName | string | Set Dialog title class name description | string or node | Set Dialog description by DialogContentText component descriptionClassName | string | Set Dialog description class name footer | string or node | Set Dialog footer by DialogActions component. Accept string or node. footerClassName | string | Set Dialog description class name showClose | boolean | Create a close icon by Fab component. Require onClose prop function

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:

Property | Type | Description ---|---|--- height | number | Set image height src | string | Set image url like src attribute on img html tag grayed | boolean | Set gray filter. The filter will be remove on hover/focus persistent | boolean | You can remove the responsive behaviour with this prop

See the demo!.

Snackbar

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

Property | Type | Description ---|---|--- variant | string success or fail | Set Snackbar style showClose | boolean | Show a close icon by IconButton component. Require onClose prop function

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:

Property | Type | Description ---|---|--- className | string | Set card className primaryColor | string | Set primary card background color secondaryColor | string | Set secondary card background color icon | node | Set card icon on left side value | string or node | Set card value on the right side label | string or node | Set label value on the right side size | one of large, normal (default) or small | Set size card and change value and label font size if you passed strings for them

See the demo!.