Highlight Components With Onboard Messages – react-onboard


react-onboard lets you easily present a set of messages that are associated with components in your app to the user. Messages don’t show up until all related components are rendered at the same time and only one shows up at a time.

Messages go away after a user has acknowledged them (i.e., clicked a highlight or hovered over it for more than a second). It interoperates with any way you show notifications and with any wrapper component to highlight components.

Install & Import:

# Yarn
$ yarn add react-onboard
$ npm i react-onboard --save
import React from 'react'
import { ToastContainer, toast } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
import { Badge, BadgeProps } from '@material-ui/core'
import InfoTwoToneIcon from '@material-ui/icons/InfoTwoTone'
import { OnboardProvider, OnboardElement } from 'react-onboard'

Basic Usage:

export default function App() {
  const messages = [
      id: 'welcomeMessage',
      children: <div>Welcome to react-onboard</div>,
      elementIds: ['welcome']
      id: 'byeMessage',
      children: <div>Bye-bye</div>,
      elementIds: ['bye']
  return (
      <ToastContainer />
        showCallback={({ messageId, children, onAck }) => {
          toast.info(children, {
            autoClose: false,
            toastId: messageId,
            onClose: onAck
        ackCallback={({ messageId }) => toast.dismiss(messageId)}
          (({ children, ...rest }) => (
                vertical: 'top',
                horizontal: 'right'
              badgeContent={<InfoTwoToneIcon color='primary' />}
          )) as React.FC<BadgeProps>
        <OnboardElement id='welcome'>
        <br />
        <OnboardElement id='bye'>


Highlight Components With Onboard Messages - react-onboard


Add Comment