Sử dụng IntroJs với Hints

Tiếp tục series sử dụng IntroJs, hôm nay mình có chia sẻ cách sử dụng IntroJs với Hints.

Cách cài đặt IntroJs tại đây

Ví dụ cơ bản

<Hints
  enabled={hintsEnabled}
  hints={hints}
/>

Props

Name	Description	Type	Required
enabled	Defines if the hints are visible or not. Default: false.	Boolean
hints	All the hints.	Hint[]
onClick	Callback called when a hint is clicked.	Function ( )
onClose	Callback called when a hint is closed.	Function ( )
options	Intro.js options.	Object

Hint

const hints = [
  {
    element: '.selector1',
    hint: 'test 1',
    hintPosition: 'middle-middle',
  },
  {
    element: '.selector2',
    hint: 'test 2',
  },
];

Name	Description	Type	Required
element	CSS selector to use for the hint.	String
hint	The tooltip text.	String
hintPosition	Position of the tooltip.	String

Intro.js API

Nếu vì lý do nào đó mà bạn cần sử dụng API Intro.js, thì bạn vẫn có thể lấy phiên bản Intro.js bằng cách sử dụng tham chiếu trên các thành phần hoặc và sử dụng this.refName.introJs

<Hints
  enabled={hintsEnabled}
  hints={hints}
  ref={hints => (this.hints = hints)}
/>

Trên đây là cách sử dụng IntroJs với Hint. Thật dễ dàng đúng không ạ? Nếu có câu hỏi gì về IntroJs thì hãy góp ý xuống phía dưới nhé. Thank you !