deepsweet / hocs Goto Github PK

View Code? Open in Web Editor NEW

2.0K 2.0K 64.0 1.89 MB

:bento: Higher-Order Components for React

Home Page: https://github.com/deepsweet/hocs/issues/31

License: MIT License

JavaScript 99.73% HTML 0.27%

higher-order-component hoc react react-native recompose

hocs's Introduction

👋

hocs's People

Contributors

Stargazers

Watchers

hocs's Issues

[QUESTION] - Why don't use just `isOnline`?

In the with-online-status-props component, why don't use just isOnline property in state? If is offline soon will not true, in the isOnline property

this.state = mapStatusToProps({
        isOnline: global.navigator.onLine,
        isOffline: !global.navigator.onLine
      })

Try CodeSandbox instead of WebpackBin

https://codesandbox.io/

@hocs/[email protected] depends on older recompose version

warning " > @hocs/[email protected]" has incorrect peer dependency "recompose@^0.26.0".

Should we not update the recompose dependency to 0.27.0 instead of 0.26.0?

Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'

versions:
react - 16.2.0
with-intersection-observer-props - 0.4.0

code:

import React from 'react'
import { injectProps } from 'relpers'
import { compose, setDisplayName, onlyUpdateForKeys, lifecycle, defaultProps } from 'recompose'
import withIntersectionObserverProps from '@hocs/with-intersection-observer-props'
import { hideIf } from 'utils'
import './styles.css'

const enhance = compose(
  hideIf(({ hide }) => hide),
  setDisplayName('LoadMore'),
  defaultProps({
    isOnePixelVisible: false,
  }),
  onlyUpdateForKeys(['hide', 'loading', 'isOnePixelVisible', 'loadMore']),
  withIntersectionObserverProps({
    isOnePixelVisible: 0.0,
  }),
  lifecycle({
    @injectProps
    componentDidUpdate({ isOnePixelVisible, loadMore }) {
      if (isOnePixelVisible) {
        loadMore()
      }
    },
  }),
)

const LoadMore = enhance(({ loading }) =>
  <load-more>{loading && 'loading…'}</load-more>,
)

export default LoadMore

error:

index.js?bac1:47 Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
    at WithIntersectionObserverProps.componentDidMount (index.js?bac1:47)
    at commitLifeCycles (react-dom.development.js?054f:8770)
    at commitAllLifeCycles (react-dom.development.js?054f:9946)
    at HTMLUnknownElement.callCallback (react-dom.development.js?054f:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?054f:581)
    at invokeGuardedCallback (react-dom.development.js?054f:438)
    at commitRoot (react-dom.development.js?054f:10050)
    at performWorkOnRoot (react-dom.development.js?054f:11017)
    at performWork (react-dom.development.js?054f:10967)
    at requestWork (react-dom.development.js?054f:10878)

'recompose' does not contain an export named 'createEagerFactory'

This error occurs in the console when running npm run build after updating recompose from v0.25.1 to v0.26.0

PS C:\Users\alex\apf2> npm run build

> [email protected] build C:\Users\alex\apf2
> react-scripts build

Creating an optimized production build...
Failed to compile.

./node_modules/@hocs/with-lifecycle/es/index.js
14:18-36 'recompose' does not contain an export named 'createEagerFactory'.

Consider adding 'hoist-non-react-statics'

Would you consider adding package hoist-non-react-statics?

So replacing the final return in src/index.js from:

return WithLifecycle

return hoistStatics(WithLifecycle, Target);

This will mean static functions, (like getInitialProps in nextJS), will still be be called.

debounce-handler: deal with component unmount

Hi there!

It's more of a question here. Let's say we have a callback with really big delay, in that case the callback might be invoked after the wrapped component had already been unmounted. Should debounce-handler do something with that? e.g. it might prevent debounced function from firing after component unmount, or force to run it right before component unmount, to ensure the last call done while component is still alive.

getDerivedStateFromProps

Hi! Cool HOC collection!

Could you please provide a usage example of a getDerivedStateFromProps method?
Is it just work inside onReceiveProps but with new logic?

demo on www.webpackbin.com is not available

demo on www.webpackbin.com is not available, maybe you need to change the service for the demo?

Errors with meteor

Hi
I used withLog version 0.2, all is fine.
But version 0.3, even after updating recompose from 0.25.1 to 0.26, gives with Meter a lot of errors with
Uncaught TypeError: Cannot read property 'meteorInstall' of undefined
I really have no clue what it is even after googling

Maintainer is needed

Hi.

I personally don't have much time to maintain the project anymore and would really appreciate if someone could take care of it.

Flow support

https://github.com/acdlite/recompose/tree/master/types

Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'

versions:
react - 16.2.0
with-intersection-observer-props - 0.4.0

code:

import React from 'react'
import { injectProps } from 'relpers'
import { compose, setDisplayName, onlyUpdateForKeys, lifecycle, defaultProps } from 'recompose'
import withIntersectionObserverProps from '@hocs/with-intersection-observer-props'
import { hideIf } from 'utils'
import './styles.css'

const enhance = compose(
  hideIf(({ hide }) => hide),
  setDisplayName('LoadMore'),
  defaultProps({
    isOnePixelVisible: false,
  }),
  onlyUpdateForKeys(['hide', 'loading', 'isOnePixelVisible', 'loadMore']),
  withIntersectionObserverProps({
    isOnePixelVisible: 0.0,
  }),
  lifecycle({
    @injectProps
    componentDidUpdate({ isOnePixelVisible, loadMore }) {
      if (isOnePixelVisible) {
        loadMore()
      }
    },
  }),
)

const LoadMore = enhance(({ loading }) =>
  <load-more>{loading && 'loading…'}</load-more>,
)

export default LoadMore

error:

index.js?bac1:47 Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
    at WithIntersectionObserverProps.componentDidMount (index.js?bac1:47)
    at commitLifeCycles (react-dom.development.js?054f:8770)
    at commitAllLifeCycles (react-dom.development.js?054f:9946)
    at HTMLUnknownElement.callCallback (react-dom.development.js?054f:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?054f:581)
    at invokeGuardedCallback (react-dom.development.js?054f:438)
    at commitRoot (react-dom.development.js?054f:10050)
    at performWorkOnRoot (react-dom.development.js?054f:11017)
    at performWork (react-dom.development.js?054f:10967)
    at requestWork (react-dom.development.js?054f:10878)

@deepsweet (you've said):
There should be ref={onRef} assigned to the target's DOM primitive like div or something. I'll mention this more explicitly in readme.

I mean subject HOC provides onRef prop as well as isOnePixelVisible which you want. In basic scenario it could look like this:

const LoadMore = enhance(({ loading, onRef }) =>
  <div ref={onRef}>{loading && 'loading…'}</div>,
)

I don't know what is in your case but it looks like onRef should be propagated down to the actual DOM primitive.

and I responded:
load-more is the actual DOM primitive, we use semantic html (as in web components) instead of plain div containers (which makes the dom structure a lot clearer).
after adding the ref as you've written it still isn't working and outputting the same error message.

React warning raised when using OnReceivedProps

Hello,

When using your great addition plugin to recompose, I see the following warning:
It is not recommended to assign props directly to state because updates to props won't be reflected in state. In most cases, it is better to use props directly.

See the example here (look at the debugger warning):
https://codesandbox.io/s/beautiful-merkle-ldcxs

Is it possible to fix this? Could I help?

Regards,

# not works...
import debounceHandler from '@hocs/debounce-handler'

When i specify import path like this(using main setting in package.json), import works correctly.

# works!
import debounceHandler from '@hocs/debounce-handler/build/node-cjs'

Error

SyntaxError: 'import' and 'export' may only appear at the top level (14:0) while parsing /Users/subuta/repo/xxxxx/node_modules/@hocs/debounce-handler/build/browser-esm/index.js while parsing file: /Users/subuta/repo/xxxxx/node_modules/@hocs/debounce-handler/build/browser-esm/index.js

Package version

[email protected]
[email protected]

.babelrc

{
  "presets": [
    "es2015",
    "stage-2",
    "react"
  ]
}

cjs build is not transpiled correctly

When using the cjs build I get an error:

Module parse failed: .../@hocs/omit-props/build/node-cjs/index.js Line 17: Unexpected token .
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
| const omitProps = (...propsToOmit) => Target => {
|   const OmitProps = props => (0, _react.createElement)(Target, (0, _justOmit2.default)(props, propsToOmit));

It is most likely related to the spread operator:

const omitProps = (...propsToOmit) => Target => {

Demo for React Native HOCs

React 16

update peer deps
update dev setup – blocked
with-lifecycle: support componentDidCatch