ساخت کامپوننت Tooltip با قلاب React — از صفر تا صد

1<Tooltip title="Tooltip on top" position="top">
2    <button>Tooltip on top</button>
3</Tooltip>

1// Externals
2import React from 'react';
3// Internals
4import Tooltip from './Tooltip/Tooltip';
5function App () {
6    return (
7        <section>
8            <h1>Tooltips using React Hooks</h1>
9            <Tooltip title="Tooltip on top" position="top">
10                <button>Tooltip on top</button>
11            </Tooltip>
12            <Tooltip title="Tooltip on bottom" position="bottom">
13                <button>Tooltip on Bottom</button>
14            </Tooltip>
15            <Tooltip title="Tooltip on left" position="left">
16                <button>Tooltip on left</button>
17            </Tooltip>
18            <Tooltip title="Tooltip on right" position="right">
19                <button>Tooltip on right</button>
20            </Tooltip>
21        </section>
22    );
23}
24export default App;

1// Externals
2import React, { useEffect, useRef, useState } from 'react';

1const node = useRef();
2const [isVisible, setState] = useState(false);
3const handleClick = ({ target }) => {
4    if (node.current.contains(target)) {
5        // inside click
6        return;
7    }
8    // outside click
9    setState(false);
10};

1useEffect(() => {
2    // add when mounted
3    document.addEventListener('mousedown', handleClick);
4    // return function to be called when unmounted
5    return () => {
6        document.removeEventListener('mousedown', handleClick);
7    };
8}, []);

1return (
2    <div className={Styles.container}
3        data-testid="tooltip"
4        ref={node}
5        onClick={() => setState(!isVisible)}
6    >
7        <div data-testid="tooltip-placeholder">{children}</div>
8        {isVisible && (
9            <div
10                className={cx(Styles.tooltipContent, Styles[position])}
11                data-testid="tooltip-content"
12            >
13                <span className={Styles.arrow}></span>
14                {title}
15            </div>
16        )}
17    </div>
18);

1Tooltip.defaultProps = {
2    position: 'right',
3};

1const propTypes = {
2    title: PropTypes.string.isRequired,
3    position: PropTypes.string,
4    children: PropTypes.node.isRequired,
5};

1Tooltip.propTypes = propTypes;
2export default Tooltip;

1// Externals
2import React, { useEffect, useRef, useState } from 'react';
3import PropTypes from 'prop-types';
4import cx from 'classnames';
5// Styling
6import Styles from './styles.css';
7
8const propTypes = {
9    title: PropTypes.string.isRequired,
10    position: PropTypes.string,
11    children: PropTypes.node.isRequired,
12};
13
14const Tooltip = ({ title, position, children }) => {
15    const node = useRef();
16    const [isVisible, setState] = useState(false);
17    const handleClick = ({ target }) => {
18        if (node.current.contains(target)) {
19            // inside click
20            return;
21        }
22        // outside click
23        setState(false);
24    };
25
26    useEffect(() => {
27        // add when mounted
28        document.addEventListener('mousedown', handleClick);
29        // return function to be called when unmounted
30        return () => {
31            document.removeEventListener('mousedown', handleClick);
32        };
33    }, []);
34
35    return (
36        <div className={Styles.container}
37            data-testid="tooltip"
38            ref={node}
39            onClick={() => setState(!isVisible)}
40        >
41            <div data-testid="tooltip-placeholder">{children}</div>
42            {isVisible && (
43                <div
44                    className={cx(Styles.tooltipContent, Styles[position])}
45                    data-testid="tooltip-content"
46                >
47                    <span className={Styles.arrow}></span>
48                    {title}
49                </div>
50            )}
51        </div>
52    );
53};
54
55Tooltip.defaultProps = {
56    position: 'right',
57};
58
59Tooltip.propTypes = propTypes;
60
61export default Tooltip;