cncjs

1
import React, { Component } from 'react';
2

3
class Hoverable extends Component {
4
    state = {
5
      hovered: false
6
    };
7

8
    handleMouseEnter = () => {
9
      this.setState({ hovered: true });
10
    };
11

12
    handleMouseLeave = () => {
13
      this.setState({ hovered: false });
14
    };
15

16
    render() {
17
      return (
18
        <div
19
          onMouseEnter={this.handleMouseEnter}
20
          onMouseLeave={this.handleMouseLeave}
21
        >
22
          {typeof this.props.children === 'function'
23
            ? this.props.children(this.state.hovered)
24
            : this.porps.children
25
          }
26
        </div>
27
      );
28
    }
29
}
30

31
export default Hoverable;
32