libreact

Collection of useful React components

streamich/libreactlibreact

README

libreact logo

libreact

[![][npm-badge]][npm-url] [![][travis-badge]][travis-url] React Universal Interface Backers on Open Collective Sponsors on Open Collective

React standard library—must-have toolbox for any React project.

- __LAUNCH STORYBOOK__ 🚀
- __See documentation__
- Most components implement React Universal Interface
- Isomorphic - most components work in browser and on server (and some in react-native).

Installation


npm i libreact --save

Usage


Library is modular—you can import each component by its name.

  1. ``` js
  2. import {mock} from 'libreact/lib/mock';
  3. // or
  4. import {mock} from 'libreact/modules/mock';

  6. const MyComponent = mock();
  7. ```

Contents


  - Introduction
  - Dummies
     - [mock()](./docs/en/mock.md) and [loadable()](./docs/en/loadable.md) — [example](https://codesandbox.io/s/j2ovpr03z3)
     - [lazy()](./docs/en/lazy.md) and [delayed()](./docs/en/delayed.md)
  - Inversion
- [``](./docs/en/State.md) and [`withState()`](./docs/en/State.md#withstate-hoc) - [``](./docs/en/Toggle.md), [`withToggle()`](./docs/en/Toggle.md#withtoggle-hoc), and [`@withToggle`](./docs/en/Toggle.md#withtoggle-decorator) — [**example**](https://codesandbox.io/s/zwkl16vv93) - [``](./docs/en/Flipflop.md), [`withFlipflop()`](./docs/en/Flipflop.md#withflipflop-hoc), and [`@withFlipflop`](./docs/en/Flipflop.md#withflipflop-decorator) - [``](./docs/en/Value.md), [`withValue()`](./docs/en/Value.md#withvalue-hoc), and [`@withValue`](./docs/en/Value.md#withvalue-decorator) - [``](./docs/en/Counter.md), [`withCounter()`](./docs/en/Counter.md#withcounter-hoc) and [`@withCounter`](./docs/en/Counter.md#withcounter-decorator) - [``](./docs/en/List.md), [`withList()`](./docs/en/List.md#withlist-hoc), and [`@withList`](./docs/en/List.md#withlist-decorator) - [``](./docs/en/Map.md), [`withMap()`](./docs/en/Map.md#withmap-hoc), and [`@withMap`](./docs/en/Map.md#withmap-decorator) - [``](./docs/en/ShouldUpdate.md), [`shouldUpdate()`](./docs/en/ShouldUpdate.md#shouldupdate-hoc), and [`pure()`](./docs/en/pure.md) - [``](./docs/en/Lifecycles.md) - [`invert()`](./docs/en/invert.md) and [``](./docs/en/invert.md#inverted)
  - Sensors
- [``](./docs/en/ActiveSensor.md), [`withActive()`](./docs/en/ActiveSensor.md#withactive-hoc), and [`@withActive`](./docs/en/ActiveSensor.md#withactive-decorator) - [``](./docs/en/BatterySensor.md), [`withBattery()`](./docs/en/BatterySensor.md#withbattery), and [`@withBattery`](./docs/en/BatterySensor.md#withbattery-1) - [``](./docs/en/ExitSensor.md) — [**example**](https://codesandbox.io/s/7437x10z71) - [``](./docs/en/FocusSensor.md), [`withFocus()`](./docs/en/FocusSensor.md#withfocus-hoc), and [`@withFocus`](./docs/en/FocusSensor.md#withfocus-decorator) - [``](./docs/en/GeoLocationSensor.md), [`withGeoLocation()`](./docs/en/GeoLocationSensor.md#withgeolocation-hoc), and [`@withGeoLocation`](./docs/en/GeoLocationSensor.md#withgeolocation-decorator) - [``](./docs/en/HoverSensor.md), [`withHover()`](./docs/en/HoverSensor.md#withhover-hoc), and [`@withHover`](./docs/en/HoverSensor.md#withhover-decorator) — [**example**](https://codesandbox.io/s/8p3xqx83p9) - [``](./docs/en/IdleSensor.md), [`withIdle()`](./docs/en/IdleSensor.md#withidle-hoc), and [`@withIdle`](./docs/en/IdleSensor.md#withidle-decorator) - [``](./docs/en/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/en/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/en/MediaDeviceSensor.md#withmediadevices-1) - [``](./docs/en/MediaSensor.md), [`withMedia()`](./docs/en/MediaSensor.md#withmedia), and [`@withMedia`](./docs/en/MediaSensor.md#withmedia-1) - [``](./docs/en/MotionSensor.md), [`withMotion()`](./docs/en/MotionSensor.md#withmotion-hoc), and [`@withMotion`](./docs/en/MotionSensor.md#withmotion-decorator) - [``](./docs/en/MouseSensor.md), [`withMouse()`](./docs/en/MouseSensor.md#withmouse-hoc), and [`@withMouse`](./docs/en/MouseSensor.md#withmouse-decorator) — [**example**](https://codesandbox.io/s/k3o16j7n47) - [``](./docs/en/NetworkSensor.md), [`withNetwork()`](./docs/en/NetworkSensor.md#withnetwork-hoc), and [`@withNetwork`](./docs/en/NetworkSensor.md#withnetwork-decorator) - [``](./docs/en/LightSensor.md), [`withLight()`](./docs/en/LightSensor.md#withlight-hoc), and [`@withLight`](./docs/en/LightSensor.md#withlight-decorator) - [``](./docs/en/LocationSensor.md), [`withLocation()`](./docs/en/LocationSensor.md#withlocation-hoc), and [`@withLocation`](./docs/en/LocationSensor.md#withlocation-decora) - [``](./docs/en/OrientationSensor.md), [`withOrientation()`](./docs/en/OrientationSensor.md#withorientation-hoc), and [`@withOrientation`](./docs/en/OrientationSensor.md#withorientation-decorator) - [``](./docs/en/ScratchSensor.md), [`withScratch()`](./docs/en/ScratchSensor.md#withscratch-hoc), and [`@withScratch`](./docs/en/ScratchSensor.md#withscratch-decorator) - [``](./docs/en/ScrollSensor.md) - [``](./docs/en/SizeSensor.md), [`withSize()`](./docs/en/SizeSensor.md#withsize-hoc), and [`@withSize`](./docs/en/SizeSensor.md#withsize-decorator) — [**example**](https://codesandbox.io/s/0y2qjm210p) - [``](./docs/en/WidthSensor.md), [`withWidth()`](./docs/en/WidthSensor.md#withwidth-hoc-and-withwidth-decorator), and [`@withWidth`](./docs/en/WidthSensor.md#withwidth-hoc-and-withwidth-decorator) - [``](./docs/en/TouchSupportSensor.md) - [``](./docs/en/ViewportSensor.md), [`withViewport()`](./docs/en/ViewportSensor.md#withviewport-hoc), and [`@withViewport`](./docs/en/ViewportSensor.md#withviewport-decorator) - [``](./docs/en/ViewportSensor.md#viewportscrollsensor) and [``](./docs/en/ViewportSensor.md#viewportobserversensor) - [``](./docs/en/WindowScrollSensor.md), [`withWindowScroll()`](./docs/en/WindowScrollSensor.md#withwindowscroll-hoc), and [`@withWindowScroll`](./docs/en/WindowScrollSensor.md#withwindowscroll-decorator) - [``](./docs/en/WindowSizeSensor.md), [`withWindowSize()`](./docs/en/WindowSizeSensor.md#withwindowsize-hoc), and [`@withWindowSize`](./docs/en/WindowSizeSensor.md#withwindowsize-decorator) - [``](./docs/en/WindowWidthSensor.md), [`withWindowWidth()`](./docs/en/WindowWidthSensor.md#withwindowwidth-hoc), and [`@withWindowWidth`](./docs/en/WindowWidthSensor.md#withwindowwidth-decorator)
  - Context
     - Google Sign-in for Websites
- [``](./docs/en/Provider.md#provider), [``](./docs/en/Provider.md#consumer), [`withContext()`](./docs/en/Provider.md#withcontext-hoc), and [`@withContext`](./docs/en/Provider.md#withcontext-decorator) - [``](./docs/en/theme.md#theme), [``](./docs/en/theme.md#themed), [`withTheme()`](./docs/en/theme.md#withtheme-hoc), and [`@withTheme`](./docs/en/theme.md#withtheme-decorator) - [``](./docs/en/cssvars.md), [``](./docs/en/cssvars.md#cssvars), [`withCssVars()`](./docs/en/cssvars.md#withcssvars-hoc), and [`@withCssVars`](./docs/en/cssvars.md#withcssvars-decorator) - [__Routing__](./docs/en/routing.md): [`createRouter()`](./docs/en/routing.md#createrouter), [``](./docs/en/routing.md#router), [``](./docs/en/routing.md#route), [``](./docs/en/routing.md#switch), [``](./docs/en/routing.md#match), [``](./docs/en/routing.md#link), and [`go()`](./docs/en/routing.md#go) - [``](./docs/en/translate.md#translations), [``](./docs/en/translate.md#translate-or-t), [``](./docs/en/translate.md#translate-or-t), [`withT()`](./docs/en/translate.md#witht-hoc), and [`@withT`](./docs/en/translate.md#witht-decorator)
  - UI
- [``](./docs/en/Portal.md), [``](./docs/en/Overlay.md), and [``](./docs/en/Modal.md) - [``](./docs/en/Dimmer.md) and [``](./docs/en/Dimmable.md) - [``](./docs/en/Parallax.md) - [``](./docs/en/FullScreen.md) - [``](./docs/en/Slider.md) - [``](./docs/en/DropArea.md) - [``](./docs/en/Group.md) - [``](./docs/en/InfiniteScroll.md) - [``](./docs/en/OutsideClick.md) - [``](./docs/en/Ripple.md) and [`withRipple()`](./docs/en/Ripple.md#withripple) — [**example**](https://codesandbox.io/s/983q7jr80o) - [``](./docs/en/Img.md) - [``](./docs/en/ListTable.md) - [``](./docs/en/WidthQuery.md), [``](./docs/en/View.md), [``](./docs/en/WindowWidthQuery.md), and [``](./docs/en/InlineWidthQuery.md) - [`