@semiorbit/react-ui-tools NPM

Semiorbit React UI Tools

A collection of wrappers for Material-ui controls Grid, GridItem, Button, Password, Select, TextField, Checkbox
Custom UI controls Section, Counter, CheckAdornment

useAlert()

React hook that utilize material-ui Alert component to easily prompt messages to user interface.

Usage

import React from 'react';
import useAlert from "@semiorbit/react-ui-tools/Alert/useAlert";

const MyView = props => {

    const alert = useAlert();

    alert.error('Connection Failed');

    return (
        <div>
            Some content here!
            <form>
                <input type="text" />
                ...etc
            </form>
            {alert.show()}
        </div>
    );
    
};

export default MyView;

Reference

Method	Description
alert.error(msg)	Build error message
alert.warning(msg)	Build warning message
alert.info(msg)	Build info message
alert.success(msg)	Build success message
alert.show()	Output alert
alert.set(msg, severity)	Build message and assign severity which is 'success' by default.
alert.global(msg, severity)	Assign global message that can be displayed in another component, by just calling alert.show()
alert.clearGlobal()	Clear global message
alert.isClosed()	Boolean. Check if the user closed the alert.
alert.onClose(handler)	Pass function or event handler to be fired when user closes alert.

useMobileView

A shortcut for useMediaQuery(theme.breakpoints.down(breakpoint)) in MUI

Usage

import useAlert from "@semiorbit/react-ui-tools/Containers/Grid/useAlert";

const isMobileView = useMobileView('sm');

if (isMobileView) {
 // something ...
}