react-callout-component v2.1.0

How does callout look?

Installation

npm i react-callout-component

Basic Usage

You need to make a change to two files:

index.html

<div id="portal"></div> <!-- add this line after div with id root -->

any of your component where you want to show callout

import React, { Component } from 'react';
import Callout from 'react-callout-component';

class App extends Component {
  constructor() {
    super();
    this.state = {
      box: null,
    };
    this.boxEl = React.createRef();
  }

  componentDidMount() {
    this.setState({
      box: this.boxEl.current,
    });
  }

  render() {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 500 }}>
        <div ref={this.boxEl} style={{ backgroundColor: 'purple', height: 100, width: 100 }} />
        <Callout isVisible parentElement={this.state.box}>
          <span style={{ color: 'white' }}>This is a box</span>
        </Callout>
      </div>
    );
  }
}

export default App;

Show callout only when parent element is hovered

import React, { Component } from 'react';
import Callout from 'react-callout-component';

class App extends Component {
  constructor() {
    super();
    this.state = {
      box: null,
      isBoxHovered: false,
    };
    this.boxEl = React.createRef();
    this.onBoxMouseEnter = this.onBoxMouseEnter.bind(this);
    this.onBoxMouseLeave = this.onBoxMouseLeave.bind(this);
  }

  componentDidMount() {
    this.setState({
      box: this.boxEl.current,
    });
  }

  onBoxMouseEnter() {
    this.setState({
      isBoxHovered: true,
    });
  }

  onBoxMouseLeave() {
    this.setState({
      isBoxHovered: false,
    });
  }

  render() {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 500 }}>
        <div
          ref={this.boxEl}
          style={{ backgroundColor: 'purple', height: 100, width: 100 }}
          onMouseEnter={this.onBoxMouseEnter}
          onMouseLeave={this.onBoxMouseLeave}
        />
        <Callout
          isVisible={this.state.isBoxHovered}
          parentElement={this.state.box}
        >
          <span style={{ color: 'white' }}>This is a box</span>
        </Callout>
      </div>
    );
  }
}

export default App;

Show callout when parent element or callout itself is hovered

import React, { Component } from 'react';
import Callout from 'react-callout-component';

class App extends Component {
  constructor() {
    super();
    this.state = {
      box: null,
      isBoxHovered: false,
    };
    this.boxEl = React.createRef();
    this.onBoxMouseEnter = this.onBoxMouseEnter.bind(this);
    this.onBoxMouseLeave = this.onBoxMouseLeave.bind(this);
  },

  componentDidMount() {
    this.setState({
      box: this.boxEl.current,
    });
  }

  onBoxMouseEnter() {
    this.setState({
      isBoxHovered: true,
    });
  }

  onBoxMouseLeave() {
    this.setState({
      isBoxHovered: false,
    });
  }

  render() {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 500 }}>
        <div
          ref={this.boxEl}
          style={{ backgroundColor: 'purple', height: 100, width: 100 }}
          onMouseEnter={this.onBoxMouseEnter}
          onMouseLeave={this.onBoxMouseLeave}
        />
        <Callout
          isVisible={this.state.isBoxHovered}
          parentElement={this.state.box}
          onMouseEnter={this.onBoxMouseEnter}
          onMouseLeave={this.onBoxMouseLeave}
        >
          <span style={{ color: 'white' }}>This is a box</span>
        </Callout>
      </div>
    );
  }
}

export default App;

Show callout only when parent element is clicked and hide it on click outside

import React, { Component } from 'react';
import Callout from 'react-callout-component';

class App extends Component {
  constructor() {
    super();
    this.state = {
      box: null,
      isBoxHovered: false,
    };
    this.boxEl = React.createRef();
    this.onBoxClick = this.onBoxClick.bind(this);
    this.onBoxClickOutside = this.onBoxClickOutside.bind(this);
  }

  componentDidMount() {
    this.setState({
      box: this.boxEl.current,
    });
  }

  onBoxClick() {
    this.setState({
      isBoxHovered: true,
    });
  }

  onBoxClickOutside() {
    this.setState({
      isBoxHovered: false,
    });
  }

  render() {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 500 }}>
        <div
          ref={this.boxEl}
          style={{ backgroundColor: 'purple', height: 100, width: 100 }}
          role="presentation"
          onClick={this.onBoxClick}
          onKeyDown={() => {}}
        />
        <Callout
          isVisible={this.state.isBoxHovered}
          parentElement={this.state.box}
          onClickOutside={this.onBoxClickOutside}
        >
          <span style={{ color: 'white' }}>This is a box</span>
        </Callout>
      </div>
    );
  }
}

export default App;

callout props