Awesome

libreact logo

libreact

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

LAUNCH STORYBOOK 🚀
See documentation
Most components implement
Isomorphic - most components work in browser and on server (and some in react-native).

Installation

<pre> npm i <a href="https://www.npmjs.com/package/libreact">libreact</a> --save </pre>

Usage

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

import {mock} from 'libreact/lib/mock';
// or
import {mock} from 'libreact/modules/mock';

const MyComponent = mock();

Introduction
Dummies
- mock() and loadable() — example
- lazy() and delayed()
Inversion
- <State> and withState()
  - <Toggle>, withToggle(), and @withToggle — example
  - <Flipflop>, withFlipflop(), and @withFlipflop
  - <Value>, withValue(), and @withValue
  - <Counter>, withCounter() and @withCounter
  - <List>, withList(), and @withList
  - <Map>, withMap(), and @withMap
- <ShouldUpdate>, shouldUpdate(), and pure()
- <Lifecycles>
- invert() and <Inverted>
Sensors
- <ActiveSensor>, withActive(), and @withActive
- <BatterySensor>, withBattery(), and @withBattery
- <ExitSensor> — example
- <FocusSensor>, withFocus(), and @withFocus
- <GeoLocationSensor>, withGeoLocation(), and @withGeoLocation
- <HoverSensor>, withHover(), and @withHover — example
- <IdleSensor>, withIdle(), and @withIdle
- <MediaDeviceSensor>, withMediaDevices(), and @withMediaDevices
- <MediaSensor>, withMedia(), and @withMedia
- <MotionSensor>, withMotion(), and @withMotion
- <MouseSensor>, withMouse(), and @withMouse — example
- <NetworkSensor>, withNetwork(), and @withNetwork
- <LightSensor>, withLight(), and @withLight
- <LocationSensor>, withLocation(), and @withLocation
- <OrientationSensor>, withOrientation(), and @withOrientation
- <ScratchSensor>, withScratch(), and @withScratch
- <ScrollSensor>
- <SizeSensor>, withSize(), and @withSize — example
  - <WidthSensor>, withWidth(), and @withWidth
- <TouchSupportSensor>
- <ViewportSensor>, withViewport(), and @withViewport
  - <ViewportScrollSensor> and <ViewportObserverSensor>
- <WindowScrollSensor>, withWindowScroll(), and @withWindowScroll
- <WindowSizeSensor>, withWindowSize(), and @withWindowSize
  - <WindowWidthSensor>, withWindowWidth(), and @withWindowWidth
Context
- Google Sign-in for Websites
- <Provider>, <Consumer>, withContext(), and @withContext
- <Theme>, <Themed>, withTheme(), and @withTheme
- <CssVarsProvider>, <CssVars>, withCssVars(), and @withCssVars
- Routing: createRouter(), <Router>, <Route>, <Switch>, <Match>, <Link>, and go()
- <Translations>, <Translate>, <T>, withT(), and @withT
UI
- <Portal>, <Overlay>, and <Modal>
- <Dimmer> and <Dimmable>
- <Parallax>
- <FullScreen>
- <Slider>
- <DropArea>
- <Group>
- <InfiniteScroll>
- <OutsideClick>
- <Ripple> and withRipple() — example
- <Img>
- <ListTable>
- <WidthQuery>, <View>, <WindowWidthQuery>, and <InlineWidthQuery>
- <Audio> and <Video>
- <Speak>, <Vibrate>, <Alert>
Animation
- <AfterTimeout>, <AfterDraf>, and <WhenIdle>
- <Render>, withRender(), and @withRender
- <RenderInterval>, withRenderInterval(), and @withRenderInterval
- <Tween>, withTween(), and @withTween
- <Interpolation>, withInterpolation(), and @withInterpolation
Side Effects
- <LocalStorage>
- <ClassNames>
Boundaries
- <BrowserOnly>, <ServerOnly>, and <ElectronOnly>
- <ErrorBoundary> and withErrorBoundary()
- <CacheBoundary>
NEXT
- createRef(), createState(), and createLifecycleEvents()
Other

Contributors

This project exists thanks to all the people who contribute. <img src="https://opencollective.com/libreact/contributors.svg?width=890&button=false" />

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

License

Unlicense — public domain.