open-amdocs/webrix

Powerful building blocks for React-based web applications.
For documentation, API overview and live examples, visit webrix.amdocs.com.

What Is Webrix?

After building numerous UI components, we realized that there are many common challenges that can be solved once and reused everywhere.

We then extracted those solutions into a set of small, single-purpose components, each aimed at overcoming a specific UI challenge.

We call these components "the bricks of the web" - hence the name Webrix.

Read more about the motivation behind Webrix.

Installation

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

# With npm
npm i webrix

# With yarn
yarn add webrix

Webrix 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()
• useDimensions()
• useAnimationFrame()
• useBoundingRectObserver()
• useEventListener()

Tools

• <ResizeObserver/>
• <Puppeteer/>