Collection of useful React components

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

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();

Contents

• 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
  • <Resolve>
  • <Sms>, <Mailto>
  • getDisplayName()
  • touchSupported()

Contributors

This project exists thanks to all the people who contribute.

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.