Open Source Software Initiatives from Unosquare uno-material-ui

ButtonWithLoading

A button that adds an animated loading icon when the action is resolving.

PROPERTIES

Name	Type	Description	Optional
isFetching	Boolean	Flag to determine if loading icon will hide/show	No
onClick	Function	Function executed when clicking on the button	No


                  import { ButtonWithLoading } from "uno-material-ui";
          const App = () => {
            const [fetching, setFetching] = React.useState(false);
            const start = () => setFetching(true);
            if (fetching) {
              setTimeout(() => setFetching(false), 4000);
            }
            return (
              < div className="App">
                < h1>uno-material-ui< /h1>
                < h2>ButtonWIthLoading< /h2>
                < ButtonWithLoading isFetching={fetching} onClick={start}>
                  Save
                < /ButtonWithLoading>
              < /div>
            );
          };

Open CodeSandbox

ConfirmationDialog

A customizable dialog to confirm important actions like to delete an item.

PROPERTIES

Name	Type	Description	Optional
onAgreeAction	Function	Action executed when agree button is pressed	No
contentText	String	Text rendered inside of modal	No
onClose	Function	Function executed when closing modal	No
open	Boolean	Flag to determine if modal is open	No
title	String	Title of the modal	No


                  import { ConfirmationDialog } from "uno-material-ui";
          const App = () => {
            const [open, setOpen] = React.useState(false);
            const onCancel = () => setOpen(false);
            const onOpen = () => setOpen(true);
            return (
              < div className="App">
                < h1>uno-material-ui< /h1>
                < h2>ConfirmationDialog< /h2>
                < Button onClick={onOpen}>Open Dialog< /Button>
                < ConfirmationDialog
                  onClose={onCancel}
                  open={open}
                  title={"Confirmation Dialog"}
                  contentText={"Are you sure?"}
                  onAgreeAction={onCancel}
                />
              < /div>
            );
          };

Open CodeSandbox

ErrorBoundary

This container catch any error in the children, displaying it, avoiding that the whole app crashes.

PROPERTIES

Name	Type	Description	Optional
error	String	Error to render on boundary	No
errorInfo	String	Info of error to trigger boundary	No

FixedLinearProgress

A linear progress component.

PROPERTIES

Name	Type	Description	Optional
isLoading	Boolean	Value to determine if component is rendering	No


                  import Button from "@material-ui/core/Button";
          import React from "react";
          import ReactDOM from "react-dom";
          import { FixedLinearProgress } from "uno-material-ui";
          import "./styles.css";
          const App = () => {
            const [fetching, setFetching] = React.useState(false);
            const onLoading = () => setFetching(true);
            if (fetching) {
              setTimeout(() => setFetching(false), 4000);
            }
            return (
              < div className="App">
                < h1>uno-material-ui< /h1>
                < h2>FixedLinearProgress< /h2>
                < FixedLinearProgress isLoading={fetching} />
                < Button onClick={onLoading}>Start loading!< /Button>
              < /div>
            );
          };

Open CodeSandbox

FormModal

A wrapper for your modals with a form logic, just add input fields.

PROPERTIES

Name	Type	Description	Optional
action	Component	Component containing the actions of the modal	No
onClose	Function	Function executed when modal is closed	No
onSubmit	Function	Function executed when submit action is called	No
open	Boolean	Flag to determine if modal will render	No
title	String	Title of the modal	No


                  import { FormModal } from "uno-material-ui";
          const initialState = { Comments: "" };
          const App = () => {
            const [open, setOpen] = React.useState(false);
            const [state, setState] = React.useState(initialState);
            const onCancel = () => setOpen(false);
            const onOpen = () => setOpen(true);
            const changeNotes = (event: any) =>
              setState({
                ...state,
                Comments: event.target.value
              });
            const handleSubmit = () => {
              alert("Hi, this is the comment:" + state.Comments);
              onCancel();
            };
            const Actions: React.FunctionComponent = () => (
                  < Button onClick={onCancel}> Cancel < /Button>
                  < Button type="submit"> Save < /Button>
            );
            return (
              < div>
                < h1>uno-material-ui< /h1>
                < h2>FormModal< /h2>
                < Button onClick={onOpen}>Open Dialog< /Button>
                < FormModal
                  actions={< Actions />}
                  onClose={onCancel}
                  onSubmit={handleSubmit}
                  open={open}
                  maxWidth="md"
                  fullWidth={true}
                  title="Form Modal"
                >
                  < TextField
                    fullWidth={true}
                    label="Notes"
                    multiline={true}
                    variant="outlined"
                    value={state.Comments}
                    onChange={changeNotes}
                    rows={4}
                  />
                < /FormModal>
              < /div>
            );
          };

Open CodeSandbox

FormSwitch

An useful switch component with label, perfect for forms.

PROPERTIES

Name	Type	Description	Optional
checked	Boolean	Value to determine if switch is on or off	No
label	String	Label that shows user the value being changed	No
onChange	Function	Function to toggle value or/off	No


                  import { FormSwitch } from "uno-material-ui";
          const App = () => {
            const [value, setValue] = React.useState(false);
            const onChange = () => {
              setValue(!value);
            };
            return (
              < div className="App">
                < h1>uno-material-ui< /h1>
                < h2>FormSwitch< /h2>
                < FormSwitch checked={value} label="Switchable" onChange={onChange} />
                < FormSwitch
                  checked={true}
                  disabled={true}
                  label="Disabled"
                  labelPlacement="bottom-start"
                  onChange={onChange}
                />
              < /div>
            );
          };

Open CodeSandbox

IndeterminatedLoading

A screen-wide modal that blocks the entire UI to prevent interruption during loading or fetching.

PROPERTIES

Name	Type	Description	Optional
isLoading	Boolean	Value that controls the rendering of the component. Once false, the component will hide	No


                  import { IndeterminatedLoading } from "uno-material-ui";
          const App = () => {
            const [fetching, setFetching] = React.useState(false);
            const startFetching = () => setFetching(true);
            if (fetching) {
              setTimeout(() => setFetching(false), 4000);
            }
            return (
              < div className="App">
                < h1>uno-material-ui< /h1>
                < h2>IndeterminatedLoading< /h2>
                < Button onClick={startFetching}> Start Fetching < /Button>
                < IndeterminatedLoading isLoading={fetching} />
              < /div>
            );
          };

Open CodeSandbox

LoadingIcon

A center-aligned circular loading animation.

PROPERTIES

Name	Type	Description	Optional
color	string	Determines which MUI color to use for the component	No


                  import { LoadingIcon } from "uno-material-ui";
          export default function App() {
            return (
              < div className="App">
                < h1>LoadingIcon< /h1>
                < h2>You can represent a loading process on screen< /h2>
                < LoadingIcon color="primary" />
                < LoadingIcon color="secondary" />
                < LoadingIcon color="default" />
              < /div>
            );
          }

Open CodeSandbox

MenuList

A left-side permanent drawer to display navigation options, it leaves an space to add a Navbar.


                  import { MenuList } from "uno-material-ui";
          const App: React.FunctionComponent = () => {
            return (
              < div className="App">
                < h1>MenuList< /h1>
                < h2>Create a custom list!< /h2>
                < MenuList>
                  < ListItem button={true}>
                    < ListItemText secondary="Dashboard" />
                  < /ListItem>
                  < ListItem button={true}>
                    < ListItemText secondary="Tools" />
                  < /ListItem>
                < /MenuList>
              < /div>
            );
          };

Open CodeSandbox

NavBar

A navbar. Uses primary color of your theme. You can add a title or logo, and buttons.

PROPERTIES

Name	Type	Description	Optional
title	String	Title inside navigation bar	No


                  import { NavBar } from "uno-material-ui";
          export default function App() {
            return (
              < div className="App">
                < NavBar title={"NavBar"} />
                < h2>Set a header navigation bar and customize at your will!< /h2>
              < /div>
            );
          }

Open CodeSandbox

SnackbarContainer

A global snackbar component implemented using Observer pattern, reducing the load on re-renders. It has to be immediately after your ThemeProvider tag because the snackbar type colors are based on the theme. Just add the container and consume the service at any children on your app.


                  import { SnackbarContainer, snackbarService } from "uno-material-ui";
          let count = 0;
          const App = props => {
            const success = {
              messageText: "Hey! Everything is awesome",
              messageType: "success"
            };
            const onOpenSuccess = () => {
              snackbarService.showSnackbar(success.messageText);
            };
            return (
              < div className="App">
                < SnackbarContainer />
                < h1>uno-material-ui< /h1>
                < h2>Snackbar< /h2>
                < div># of re-renders: {count}< /div>
                < div className={classes.flexContainer}>
                  < Button className={classes.info} onClick={onOpenInfo}>
                    Open Info Snackbar
                  < /Button>
                < /div>
              < /div>
            );
          };

Open CodeSandbox

TextValidator

An input with validations.

PROPERTIES

Name	Type	Description	Optional
label	String	Label appearing beside the control	No
onChange	Function	Function that changes the value of the control	No
validators	Array	Array of validator rules applied to the control's value	No
errorMessages	Array	Array of messages shown when validators are not met	No
value	String	Value contained on the control	No


                  import { TextValidator } from "uno-material-ui";
          const App: React.FunctionComponent = (props: any) => {
            const [data, handleChange] = useStateForModel({ name: "" });
            const sendData = () => handleChange({ name: "" });
            return (
              < div className="App">
                < h1>TextValidator< /h1>
                < h2>Set your own rules to your forms!< /h2>
                < ValidatorForm className={classes.form} onSubmit={sendData}>
                  < TextValidator
                    id="name"
                    label="Name"
                    name="name"
                    onChange={handleChange}
                    value={data.name}
                    validators={["required"]}
                    errorMessages={["This field is required"]}
                  />
                  < Button type="submit">Submit< /Button>
                < /ValidatorForm>
              < /div>
            );
          };

Open CodeSandbox

ThumbnailPhoto

An small avatar to display a photo with tooltip.

PROPERTIES

Name	Type	Description	Optional
fullName	String	Full name of the contact	No
imgSrc	String	Source to the image to show	No
placement	String	Placement of the tooltip	No


                  import { ThumbnailPhoto } from "uno-material-ui";
          export default function App() {
            return (
              < div className="App">
                < h1>ThumbnailPhoto< /h1>
                < h2>Create your custom presentation cards!< /h2>
                < div>
                  < ThumbnailPhoto
                    fullName="John Doe"
                    imgSrc="https://avatars0.githubusercontent.com/u/1775792?s=400&v=4"
                    placement="right"
                  />
                < /div>
              < /div>
            );
          }

Open CodeSandbox

Title

A title, it also changes the document title, so it is displayed on the tab of your web browser.

PROPERTIES

Name	Type	Description	Optional
value	String	String to be used as title.	No
prefix	String	String used as a suffix for the value.	No
suffix	String	String used as a prefix for the value.	No


                  import { Title } from "uno-material-ui";
          export default function App() {
            return (
              < div className="App">
                < h1>Title< /h1>
                < h2>Put your own title to your page and tab!< /h2>
                < Title
                  prefix="Unosquare"
                  suffix="uno-material-ui"
                  value="This is a title"
                />
              < /div>
            );
          }

Open CodeSandbox