ray-hints v0.0.1

ray-hints

dependencies

• Intro.js

usage

css

import 'intro.js/introjs.css';

module

import { TipSteps, TipHints } from 'ray-hints';

Steps demo

• Basic

const steps = [
  {
    element: '.selector1',
    intro: '步骤1',
    position: 'right',
    tooltipClass: 'myTooltipClass',
    highlightClass: 'myHighlightClass',
  },
  {
    element: '.selector2',
    intro: '步骤2',
  },
  {
    element: '.selector3',
    intro: '步骤3',
  },
];

<TipSteps
  enabled={stepsEnabled}
  steps={steps}
  initialStep={initialStep}
  onExit={this.onExit}
/>

• Dynamic elements

如果想使用Intro.js步骤与动态创建的元素，则必须更新与该步骤相关联的元素

使用 updateStepElement() API

onBeforeChange = nextStepIndex => {
  if (nextStepIndex === 4) {
    this.steps.updateStepElement(nextStepIndex);
  }
}

<TipSteps
  enabled={stepsEnabled}
  steps={steps}
  ref={steps => (this.steps = steps)}
/>

TipHints demo

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

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

// use Instro instance
<TipHints
  enabled={hintsEnabled}
  steps={hints}
  ref={hints => (this.hints = hints)}
/>

Install

npm install ray-hints --save

Props

TipSteps props

Step

{
  element: String // 用于步骤的CSS选择器.
  intro: String // 提示文本.
  position: String // 提示显示位置.
  tooltipClass: String // 提示框样式名.
  highlightClass: String // 高亮浮层的样式名.
}

TipHints props

Hint

{
  element: String // hint 元素选择器，必填
  hint: String // hint提示内容，必填
  hintPosition: String // 提示框位置
  hintAnimation: Boolean // 是否启用动画
}

Intro.js-options

Intro.js documentation

Intro.js options

Intro.js code.

default options _utils/defaultProps.js file.

hint-options

License

MIT