Webrix.js - Building Blocks for Interactive React Apps
Tags: showdev, react, github, webdev
Published: 2021-02-17 12:34:40

For the past 3 years, I've been working with a great team of UI developers on one of Amdocs' flagship products, and in the process, we've faced many challenges.

To solve these challenges, we developed a set of React components and hooks, each dedicated to solving a single UI challenge.

Recently, we decided to release these components and hooks as an open-source library, called [webrix.js](https://webrix.amdocs.com/).

Unlike many other component banks out there that provide feature-packed, fully-branded end-user components, we decided to take a different approach and develop a set of small, single-purpose, unbranded components. This gives you more freedom to develop your own component bank with the UX that best matches your domain.

---

Below are some of the components you can find in Webrix.js:

### Movable
![Webrix.js - Movable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyedt3md7e5lfue5azxq.gif)
The `<Movable/>` component can be used to create movable elements, with optional constraints. We use `<Movable/>` to create things like sliders, resizers, movable modals, scrollbar handles, and more. [See more `<Movable/>` examples here](https://webrix.amdocs.com/docs/components/movable).

### Resizable
![Webrix.js - Resizable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06zilqx5875aohhbwsek.gif)
The `<Resizable/>` component can be used to create resizable elements, with optional constraints. We use `<Resizable/>` for creating resizable modals, image editing tools, and resizable layouts. [See more `<Resizable/>` examples here](https://webrix.amdocs.com/docs/components/resizable).

### Poppable
![Webrix.js - Poppable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvr15h5e1lmvyf86ju43.gif)
The `<Poppable/>` component can be used to create elements that "pop out" of the screen. We use `<Poppable/>` for creating popups, menus, tooltips, dropdowns, and more. The `<Poppable/>` has a built-in mechanism for overflow avoidance and dynamic z-index calculations. [See more `<Poppable/>` examples here](https://webrix.amdocs.com/docs/components/poppable).

### Scrollable
![Webrix.js - Scrollable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94pq89hx4nkmj6p01j9w.gif)
The `<Scrollable/>` component can be used to create elements with scrollable content and fully-customizable scrollbars. The elements behave just like a natively scrollable element, so working with them is pretty straightforward, and requires no CSS hacks. [See more `<Scrollable/>` examples here](https://webrix.amdocs.com/docs/components/scrollable).

### Collapsible
![Webrix.js - Collapsible](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7qnwsrrphmd1r661ed6.gif)
The `<Collapsible/>` component allows you to collapse/expand an element with arbitrary content height and apply a nice transition to it. This is a challenge to achieve with CSS only, so we use a mix of JS & CSS to overcome this (we discuss the solution further in the documentation). [See more `<Collapsible/>` examples here](https://webrix.amdocs.com/docs/components/collapsible).

These are just a few of the available components in Webrix.js

---

Since these components are already used by some of Amdocs' products, they are field-tested and have reached a certain maturity level.

I invite you to visit our [documentation](https://webrix.amdocs.com/docs) and take a look at some of the [examples](https://webrix.amdocs.com/examples) that were created using Webrix.js.

Also, starring our [project on GitHub](https://github.com/open-amdocs/webrix) will help us a lot! 😁