@react-web/hover

@react-shared/hover

Install

yarn add @react-shared/hover # or npm install @react-shared/hover

Usage

high order component

import React, {Component} from 'react'
import {withHover} from '@react-shared/hover'

class Example extends Component {
  render(){
    return (
      <div>
        {this.props.isHovered ? 'hovered': 'not hovered'}
      </div>
    )
  }
}

export default withHover(Example)

component

import React, {Component} from 'react'
import {Hover} from '@react-shared/hover'

class Example extends Component {
  render() {
    return (
      <Hover>
        {(props) => {
          return (
            <div>
              {this.props.isHovered ? 'hovered': 'not hovered'}
            </div>
          )
        }}
      </Hover>
    )
  }
}

export default Example

props

• tagName the wrapper tagName, default 'dev'

• className only work when children is string or array

• style only work when children is string or array

• onStateChange the hover state, example:

    onStateChange = (state) => {console.log(state.isHovered)}

License

MIT