If you like the project, please give the project a GitHub 🌟

React component for showing information hints 🥸 🎨 Easy to customize 💨 Lightweight

Installation

npm install react-hinter

Usage

1 . Import the ReactHinter component and default styles for it. It's important to import default styles, hinter won't show without it.

import { ReactHinter } from "react-hinter";
import "react-hinter/dist/css/style.css";

2 . Select the elements that ReactHinter will point to. Specify the required data-attributes as in the example below. Mandatory data-attributes are data-rh-namespace - the namespace in which ReactHinter elements will be defined, data-rh-step - the counting order that ReactHinter will point to, data-text - the text that ReactHinter will draw.

return (
    <>
      <button
        data-rh-namespace="namespace"
        data-rh-step={1}
        data-rh-text="Text for hinter step 1"
      >
        Step 1
      </button>

      <button
        data-rh-namespace="namespace"
        data-rh-step={2}
        data-rh-text="Text for hinter step 2"
      >
        Step 2
      </button>
    </>
);

3 . Define a React Hinter component with required parameters. namespace - the same as data-namespace for elements, active - boolean state, onEnd - ReactHinter end events.

 <ReactHinter
    namespace="namespace"
    active={active}
    onEnd={() => setActive(false)}
/>

Full example

function App() {
    const [active, setActive] = useState(false);

    return (
        <>
            <button
                data-rh-namespace="namespace"
                data-rh-step={1}
                data-rh-text="Text for hinter step 1"
            >
                Step 1
            </button>

            <button
                data-rh-namespace="namespace"
                data-rh-step={2}
                data-rh-text="Text for hinter step 2"
            >
                Step 2
            </button>

            <ReactHinter
                namespace="namespace"
                active={active}
                onEnd={() => setActive(false)}
            />
        </>
    );
}

Customization

if you want to make your own unique content, ReactHinter accepts props content which takes exactly the same parameters for rendering as React Hinter.

import { ReactHinter, ReactHinterContentProps } from "react-hinter";
import "react-hinter/dist/css/style.css";

const MyAwesomeContent:FC<ReactHinterContentProps> = ({ prevStep, nextStep, finish, text }) => {
    return (
        <div>
            {text}
            <button onClick={nextStep}>Next step</button>
            <button onClick={prevStep}>Prev step</button>
            <button onClick={finish}>Finish</button>
        </div>
    )
}

const MainPage = () => {
    const [active, setActive] = useState(false);
    
    return (
        <>
            <button
                data-rh-namespace="scramble"
                data-rh-step={1}
                data-rh-text="Take 2 eggs and beat them!"
                data-rh-preferred-position="top"
            >
                Step 1: Take eggs
            </button>

            <button
                data-rh-namespace="scramble"
                data-rh-step={3}
                data-rh-text="Enjoy your meal :)"
            >
                Step 3: Enjoy
            </button>
            <button
                data-rh-namespace="scramble"
                data-rh-step={2}
                data-rh-text="Take a pen and heat it well!"
                data-rh-preferred-position="top"
            >
                Step 2: Take a pan
            </button>

            <ReactHinter
                namespace="scramble"
                active={active}
                content={MyAwesomeContent}
                onEnd={() => setActive(false)}
            />
        </>
    );
};

ReactHinter props

| Parameter | Type | Required | Default | About | |---------------|------------------------|----------|-----------|---------------------------------------------------------------------------------------------------| | active | boolean | true | false | Active state of ReactHinter | | namespace | string | true | – | Namespace in which ReactHinter will navigate | | onEnd | () => void | true | – | An event that fires when ReactHinter terminates. Here you should set the activity status to false | | content | FC<ReactHinterProps> | false | undefined | Your custom content component | | className | string | false | undefined | Your className |

ReactHinterContent props

| Parameter | Type | About | |-----------------|---------------------------------|---------------------------------------------------------------------------------------| | steps | number | Total number of steps passed in this namespace | | currentStep | number | Current active step | | text | string | data-rh-text that was passed to the element. Will subsequently display in ReactHinter | | elements | HTMLElement[] | All DOM namespace elements | | position | { left?: number; top?: number } | Current ReactHinter position | | nextStep | () => void | Function to go to next step | | prevStep | () => void | Function to go to previous step | | finish | () => void | function that terminates ReactHinter |

Additional HTMLAttributes

| Parameter | Type | Required for work | About | |--------------------------------|-----------------------|-------------------|--------------------------------------------------------------------------| | data-rh-namespace | string | true | Namespace in which ReactHinter will navigate | | data-rh-preferred-position | ReactHinterPlacesType | false | ReactHinter's preferred position relative to the element (top or bottom) | | data-rh-text | string | false | Text that will be displayed in ReactHinter | | data-rh-step | number | true | The order in which ReactHinter will be rendered relative to this element |

License

ISC