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

Tools

• <ResizeObserver/>
• <Puppeteer/>