open-amdocs / Webrix

Powerful building blocks for React-based web applications.

For the full documentation, API overview and live examples, visit the official Webrix documentation site.

What Is Webrix?

Webrix is a set of small, single-purpose components, each aimed at overcoming a specific UI challenge. It's not a component bank, but rather a set of components with which you can build your own component bank, whether it's basic or highly complex.

Installation

You can install Webrix with npm (or yarn if you prefer).

# With npm
npm i webrix

# With yarn
yarn add webrix

Webrix requires has peer dependencies for react, react-dom and prop-types, so be sure to install them as well:

npm i react react-dom prop-types

Usage

Webrix components can be imported using named imports:

import {Movable} from 'webrix';

<Movable {...props}/>

Components

• <Movable/>
• <Stackable/>
• <Pannable/>
• <Resizable/>
• <Poppable/>
• <Scalable/>
• <Scrollable/>
• <Collapsible/>

Hooks

• useBooleanState()
• usePrevious()
• useMounted()
• useClickOutside()
• useTimeout()
• useDebounce()
• useThrottle()
• useObject()

Tools

• <ResizeObserver/>
• <Puppeteer/>