ethanselzer / react-hover-observer Goto Github PK

View Code? Open in Web Editor NEW

55.0 4.0 15.0 156 KB

A React component that notifies its children of hover interactions

License: MIT License

JavaScript 100.00%

react hover observer monitor mouseenter mouseleave mouseover mouseout hoverintent delay

react-hover-observer's People

Contributors

Stargazers

Watchers

Forkers

barbagrigia droeftoeter billfei antoinebigard jacekradko trendingtechnology verystarters redler dcalixto sagarsoni7 gs-tgromkov vishwajeetraj11 erwinsmit dangerdespain

react-hover-observer's Issues

hope to add a feature which can cancel the delay trigger

For example, there is a situation that it will trigger a popover when the mouse is over an element more than 500ms. But if less than 500ms, the popover won't be triggered.

Looking forward to your response.

Linkcodepen

delay before triggerring a function

I'd like to change my component state when a child component is hovered, after a short delay.

I thought

  onHoverChanged() {
    alert('toto')
    this.setStarte({hovered: true})
  }

<ReactHoverObserver
  onMouseOver={this.onHoverChanged}
   hoverDelayInMs={200}
 >

would do the trick, but it fires the onMouseOver function immediately ('toto' appears right as I hover the element) . How can I apply the delay ?

feature request: Option to use <span> instead of <div>

I'm using this to style hyperlinks and the <div> wrapper messes up the flow of the page content. I can work around it for now using className and an external stylesheet to make the div display: inline but it would be nice to simply have the option to use <span> as the observing DOM element.

can it notify the child component that is hovered if wrapped with styled component?

question

Hi,

Thanks for the good work. I am using it on my projects heavily.

Does it support https://github.com/styled-components/styled-components ? I am using the following code

import React from 'react';
import ReactHoverObserver from 'react-hover-observer';
import { FieldBlock, FieldBoundaries } from './block.style';

export default ({ children, admin }) => (
  <FieldBlock className="hello">
    <ReactHoverObserver>
      {admin && <div className="drag-me">Drag Here</div>}
      <div>
        <FieldBoundaries>{children}</FieldBoundaries>
      </div>
    </ReactHoverObserver>
  </FieldBlock>
);

where the block.style.js is

import styled from 'styled-components';
import { palette } from 'styled-theme';

const FieldBlock = styled.div`
  ${'' /* background-color: #f4f4f5; */}
  background-color: ${palette('grey', 0)}; 
  padding: 30px;
`;

const FieldBoundaries = styled.div`
  background-color: #ffffff;
  border: 2px dashed #e9ebf3;
  padding: 30px 20px;
  border-radius: 3px;
`;

export { FieldBlock, FieldBoundaries };

if I remove the styled component and put a div aroung children property it does not work.

import React from 'react';
import ReactHoverObserver from 'react-hover-observer';
import { FieldBlock, FieldBoundaries } from './block.style';

export default ({ children, admin }) => (
  <FieldBlock className="hello">
    <ReactHoverObserver>
      {admin && <div className="drag-me">Drag Here</div>}
       <div> {children}</div>
    </ReactHoverObserver>
  </FieldBlock>
);

It works when I remove the styled component wrapper around children property.

import React from 'react';
import ReactHoverObserver from 'react-hover-observer';
import { FieldBlock, FieldBoundaries } from './block.style';

export default ({ children, admin }) => (
  <FieldBlock className="hello">
    <ReactHoverObserver>
      {admin && <div className="drag-me">Drag Here</div>}
        {children}
    </ReactHoverObserver>
  </FieldBlock>
);

Am I missing something or it does not have support for styled component?

Style not being applied.

Hi there,

Thanks for the great library. Unfortunately I can't use it as I need to pass style props programmatically to the div that's created. Can you please accept passed in style props?

Could you provide a more fleshed out example?

I'm new to react, and just seeing this...

    <ReactHoverObserver {{...
        onMouseEnter: ({ setIsHovering }) => setIsHovering(),
        onMouseLeave: ({ unsetIsHovering }) => unsetIsHovering()
    }}>
        Add your components here!
    </ReactHoverObserver>

Isn't really enough to see how to make this do anything. Banged my head against the wall for a while.

A. If I make a function up above that is setIsHovering

  setIsHovering() {
    console.log("Does something.");
    console.log(this.state.isHovering);
  }

It never fires off, even if you hover.

B. If i try to set the function like this:

onMouseEnter: ({ setIsHovering }) => setIsHoveringCustom(),

  setIsHoveringCustom() {
    console.log("Does something.");
    console.log(this.state.isHovering);
  }

That just breaks and says I haven't created function 'setIsHoveringCustom' even though I did.

I'm sure I'm just missing something fundamental here and I don't know how to use this, but would be nice to get a bigger jumpstart from the docs as they were.

For now, would you give me an example of how to have this run a function somewhere?

Thank you so much! I have a big project that has lots of fancy animations and hover events that this would be insanely helpful in building.

Passing Function as Child

Hey @ethanselzer. Thanks for building this package, it's been very useful for me and I'm very grateful. One of the things I'd like to do to extend it is allow the passing of a function as a HoverObservers's children prop. This would make it a lot more flexible. Currently, what I have to do is explicitly make a new component(s) so the component can be decorated with the prop isHovering.

For this to make a little sense I'd like to show you an example.

<ReactHoverObserver hoverOffDelayInMs={100}>
     <Tabs
         isActive={}
      />
</ReactHoverObserver>

In the example above, Tabs is already a very simple component that has a semantic isActive prop. In this use case, I'd like for my tab to be active when I am hovering... In other tabs on my site I'd like them to be active only when clicking. Clearly two different use cases.

To pass isHovering to my <Tabs /> component, currently I would have to make another component because of how react-hover-observer decorates a component with isHovering.

<ReactHoverObserver hoverOffDelayInMs={100}>
     <SpecificHoveringTabs/>
</ReactHoverObserver>

// SpecificHoveringTabs.js
...
return (
  <Tabs isActive={this.props.isHovering}
)

What I'd like to do is be able to specify a function to be passed as a child. So that I can be more flexible with the children to ReactHoverObserver. For example...

<ReactHoverObserver hoverOffDelayInMs={100}>
  {(props) => {
    const {isHovering} = this.props;
    return (
      <Tabs
         isActive={isHovering}
      />
    )
  }
</ReactHoverObserver>

What do you think about this idea?

<ReactHoverObserver  onHoverChanged={this.handleHoverChanged}>
        {(
          { isHovering } //eslint-disable-line no-unused-vars
        ) => <MyComponent/>}</ReactHoverObserver>

Error:

aught TypeError: Class constructor ProxyComponent cannot be invoked without 'new'
    at mountIndeterminateComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:13600)
    at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:13924)
    at performUnitOfWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16249)
    at workLoop (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16287)
    at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:145)
    at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:195)
    at invokeGuardedCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:248)
    at replayUnitOfWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:15578)
    at renderRoot (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16381)
    at performWorkOnRoot (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17220)
4webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14389 The above error occurred in the <ReactHoverObserver> component:
    in ReactHoverObserver (created by WelcomeOption)
    in WelcomeOption (created by WelcomeDropdown)
    in div (created by WelcomeDropdown)
    in section (created by WelcomeDropdown)
    in Transition (created by CSSTransition)
    in CSSTransition (created by WelcomeDropdown)
    in WelcomeDropdown (created by InjectIntl(WelcomeDropdown))
    in InjectIntl(WelcomeDropdown) (created by Header)
    in Header (created by Route)
    in Route (created by withRouter(Header))
    in withRouter(Header) (created by InjectIntl(withRouter(Header)))
    in InjectIntl(withRouter(Header)) (created by HomeApp)
    in main (created by HomeApp)
    in HomeApp (created by Connect(HomeApp))
    in Connect(HomeApp) (created by InjectIntl(Connect(HomeApp)))
    in InjectIntl(Connect(HomeApp)) (created by Route)
    in Route
    in Router (created by BrowserRouter)
    in BrowserRouter
    in PersistGate
    in Provider
    in AppContainer
    in IntlProvider

ethanselzer / react-hover-observer Goto Github PK

react-hover-observer's People

Contributors

Stargazers

Watchers

Forkers

react-hover-observer's Issues

hope to add a feature which can cancel the delay trigger

Linkcodepen

delay before triggerring a function

feature request: Option to use <span> instead of <div>

can it notify the child component that is hovered if wrapped with styled component?

Style not being applied.

Could you provide a more fleshed out example?

Passing Function as Child

replace the wrapper

SVG elements

Hover Observer Breaks with React 16.5.0

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent