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 :)
React beautiful is available as an npm package.
// With npm
npm install react-beautiful
// With yarn
yarn add react-beautiful
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'));
React Beautiful have several components:
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 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 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 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!.