@restart/ui

What is @restart/ui?

@restart/ui is a collection of reusable UI components and utilities for building React applications. It provides a set of accessible and customizable components that can be used to create complex user interfaces with ease.

What are @restart/ui's main functionalities?

Dropdown

The Dropdown component provides a toggleable menu for displaying a list of links or actions. It is fully accessible and customizable.

import { Dropdown } from '@restart/ui';

function Example() {
  return (
    <Dropdown>
      <Dropdown.Toggle id="dropdown-basic">
        Dropdown Button
      </Dropdown.Toggle>

      <Dropdown.Menu>
        <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
        <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
        <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
}

Modal

The Modal component is used to create dialog boxes or pop-ups. It is fully accessible and can be customized to fit various use cases.

import { Modal } from '@restart/ui';

function Example() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

Tooltip

The Tooltip component provides contextual information when users hover over or focus on an element. It is fully accessible and customizable.

import { Tooltip, OverlayTrigger } from '@restart/ui';

function Example() {
  const renderTooltip = (props) => (
    <Tooltip id="button-tooltip" {...props}>
      Simple tooltip
    </Tooltip>
  );

  return (
    <OverlayTrigger
      placement="right"
      delay={{ show: 250, hide: 400 }}
      overlay={renderTooltip}
    >
      <Button variant="success">Hover me to see</Button>
    </OverlayTrigger>
  );
}

Other packages similar to @restart/ui

react-bootstrap

React-Bootstrap is a popular library that provides Bootstrap components as React components. It offers a wide range of UI components similar to @restart/ui, but with the added benefit of Bootstrap's styling and theming capabilities.

material-ui

Material-UI is a comprehensive library of React components that implement Google's Material Design. It offers a wide range of components and utilities, similar to @restart/ui, but with a focus on Material Design principles.

semantic-ui-react

Semantic UI React is the official React integration for Semantic UI. It provides a set of React components that are styled using Semantic UI's CSS framework. It offers similar functionalities to @restart/ui but with a different design philosophy.

README

react-overlays

Utilities for creating robust overlay components.

Documentation

https://react-bootstrap.github.io/react-overlays

Installation

npm install --save react-overlays

Notes

All of these utilities have been abstracted out of React-Bootstrap in order to provide better access to the generic implementations of these commonly-needed components. The included components are building blocks for creating more polished components. Everything is bring-your-own-styles, CSS or otherwise.

If you are looking for more complete overlays, modals, or tooltips – something you can use out-of-the-box – check out React-Bootstrap, which is built using these components.

Changelog

0.1.1 (2021-07-29)

Bug Fixes

• NavItem: pass href to component (#27) (93a0c0f)