react-beautiful

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