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](https://webrix.amdocs.com/motivation).
### Installation
You can install Webrix with `npm` (or `yarn` if you prefer).
```bash
# 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:
```bash
npm i react react-dom prop-types
```
### Usage
Webrix components can be imported using named imports:
```js
import {Movable} from 'webrix';
```
### Components
* [](https://webrix.amdocs.com/docs/components/movable)
* [](https://webrix.amdocs.com/docs/components/stackable)
* [](https://webrix.amdocs.com/docs/components/pannable)
* [](https://webrix.amdocs.com/docs/components/resizable)
* [](https://webrix.amdocs.com/docs/components/poppable)
* [](https://webrix.amdocs.com/docs/components/Scalable)
* [](https://webrix.amdocs.com/docs/components/scrollable)
* [](https://webrix.amdocs.com/docs/components/collapsible)
### Hooks
* [useBooleanState()](https://webrix.amdocs.com/docs/hooks/usebooleanstate)
* [usePrevious()](https://webrix.amdocs.com/docs/hooks/useprevious)
* [useMounted()](https://webrix.amdocs.com/docs/hooks/usemounted)
* [useClickOutside()](https://webrix.amdocs.com/docs/hooks/useclickoutside)
* [useTimeout()](https://webrix.amdocs.com/docs/hooks/usetimeout)
* [useDebounce()](https://webrix.amdocs.com/docs/hooks/usedebounce)
* [useThrottle()](https://webrix.amdocs.com/docs/hooks/usethrottle)
* [useObject()](https://webrix.amdocs.com/docs/hooks/useobject)
* [useDimensions()](https://webrix.amdocs.com/docs/hooks/usedimensions)
* [useAnimationFrame()](https://webrix.amdocs.com/docs/hooks/useanimationframe)
* [useBoundingRectObserver()](https://webrix.amdocs.com/docs/hooks/useboundingrectobserver)
* [useEventListener()](https://webrix.amdocs.com/docs/hooks/useeventlistener)
### Tools
* [](https://webrix.amdocs.com/docs/tools/resizeobserver)
* [](https://webrix.amdocs.com/docs/tools/puppeteer)
