streamich/libreact

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

npm i libreact --save

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.

libreact's Issues

<ErrorSnapshotBoundary>

Create <ErrorSnapshotBoundary> component that would take children element screenshots on error. It could internally use <ErrorBoundary> component.

OutsideClick only works in the context of a single DOM tree

The technique used in this library for the OutsideClick component is closely coupled to the DOM. The technique used in this library only works in the context of a single DOM tree. This is a problem if you want to apply <OutsideClick> around a portal (imagine a context menu that appears next to a users mouse click, for example).

If you render something inside it that contains a portal, it breaks:

Uncaught TypeError: _this.el.contains is not a function
    at HTMLDocument.OutsideClick._this.onClickOutside

A potential different, more decoupled approach, would be to make use of onBlur on the OutsideClick component, tracking if the user is clicking it or something else via hover detection, but this would mean one ends up with a radically different solution.

v2

Prepare a v2.0.0 release that supports only React 16+, and drops the old features:

• Old life-cycle methods.
• Old context API.
• Old portal API.

Component viabilities

Howdy! Thanks for starting this. Before I did a bunch of work, I wanted to put forward some suggestions for components to see if you'd be interested in adding them to libreact. If there's interest, I'll definitely make some PRs!

• TouchSensor: This would pass through a boolean indicating if the device supports touch interactions or not. Useful for displaying some UI components on a mobile device rather than guessing a good width.
• OSOnly: The OS of the device. This would be helpful for changing/adjusting layout based on Safari's bottom bar, etc. Takes an array of OS' to target.
• ReducedMotionSensor: Renders via a child function that passes through whether the user prefers reduced animation on their device. Name isn't the best. Probably just exports a specific instance of MediaSensor
• Conditional components. It would be interesting to see if js-control-statements would be willing to merge with this project!
• Tabs: I don't like the name, but this would provide a way to have a nav that toggles content below without (or maybe with?) changing the route.
• LoadingSpinner: Some sort of nice default for a loading spinner.

[Feature Request] React hooks support.

Libreact is the best repo to start supporting react hooks.

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

More Examples

Hello, I look at the document, but i don't know the use effect of the component. Whether can provide more examples to explain the use of the components?

iframe

Create <iframe> component that renders children in an iframe; all events should still work.

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

SizeSensor throws TypeError when child has style

If you create a child with a style (even an empty one) like this:

    render() {
        return (
            <SizeSensor onSize={this.onResize}>
                <div style={{}}>
                    {this.props.children}
                </div>
            </SizeSensor>
        );
    }

SizeSensor throws the error below. Removing the style attribute fixes the issue.

react-dom.development.js:20266 Uncaught TypeError: Cannot assign to read only property 'position' of object '#<Object>'
    at SizeSensor.webpackHotUpdate../node_modules/libreact/lib/SizeSensor/index.js.SizeSensor.render (index.js:68)
    at finishClassComponent (react-dom.development.js:14695)
    at updateClassComponent (react-dom.development.js:14650)
    at beginWork (react-dom.development.js:15598)
    at performUnitOfWork (react-dom.development.js:19266)
    at workLoop (react-dom.development.js:19306)
    at renderRoot (react-dom.development.js:19389)
    at performWorkOnRoot (react-dom.development.js:20296)
    at performWork (react-dom.development.js:20208)
    at performSyncWork (react-dom.development.js:20182)

[question] how to consume libreact in TypeScript

Hi there! Thanks for this awesome library!
I might be missing something as when I try to import for example, router components, I'm getting:

Cannot find declaration file for module...

When importing from src instead of lib I don't get this error, but parcel-bundler can't find the sources.

Any suggestions?

Cheers!

[Question] How to use withViewport with withRouter ?

Hello, thank you for this amazing library.
I have a component like this

export default withViewport(MyComponent, 'visible', {
  threshold: 0.25
});

Normaly with HOCs I will do this

export default compose(withViewport, withRouter)(MyComponent)

But I have threshold parameters!
How do I pass in?
Thank you!

MediaSensor

<MediaSensor> is probably calling .setState in constructor.

Error on OutsideClick with Styled component

Hello,

I give a try for this : , but it show this error : Uncaught TypeError: root.contains is not a function at index.js:35 at Array.some

This is because root is equal to the element a this point, and el does not have a contains function.

Error with Wrapper = styled('div')({})

 <OutsideClick onClick={() => setOpen(false)}>
        <Wrapper>

Works with

<OutsideClick onClick={() => setOpen(false)}>
      <div>
        <Wrapper>

It seems that the ref is not handle correctly. I'll switch to https://github.com/streamich/react-use/blob/master/docs/useOutsideClick.md for now, but I prefer this way instead of the react-use one

I'm getting a compile error using WindowWidthSensor

Error Message:

Failed to compile.
lib/WindowWidthSensor/index.d.ts
(2,42): Cannot find module '../typing'.

Example code:

import * as React from "react"
import { WindowWidthQuery } from "libreact/lib/WindowWidthQuery"
import { View } from "libreact/lib/View"

export function WindowWidthExample(): JSX.Element {
  return (
    <div>
      <WindowWidthQuery>
        <View maxWidth={300}>This will not render.</View>
        <View>This will render!</View>
      </WindowWidthQuery>
    </div>
  )
}

Using:

 "libreact": "^2.2.0",

Forms

Create components for form handling, prior art:

• https://github.com/erikras/redux-form
• https://github.com/final-form/react-final-form
• https://github.com/jaredpalmer/formik