Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/open-amdocs/webrix
Powerful building blocks for React-based web applications
https://github.com/open-amdocs/webrix
components frontend library react ui ui-components web-components
Last synced: about 2 months ago
JSON representation
Powerful building blocks for React-based web applications
- Host: GitHub
- URL: https://github.com/open-amdocs/webrix
- Owner: open-amdocs
- License: apache-2.0
- Created: 2020-04-21T13:16:10.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-08-20T12:46:42.000Z (about 1 year ago)
- Last Synced: 2024-07-20T07:50:28.337Z (2 months ago)
- Topics: components, frontend, library, react, ui, ui-components, web-components
- Language: JavaScript
- Homepage: https://webrix.amdocs.com
- Size: 1.66 MB
- Stars: 430
- Watchers: 12
- Forks: 32
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
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 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)