# ray-hints

> hints

Latest version **0.0.1** (published 2018-10-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install ray-hints
pnpm add ray-hints
yarn add ray-hints
bun add ray-hints
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2018-10-24 |
| First published | 2018-10-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 30.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ilex.h |
| Maintainers | ilex.h |
| Keywords | react, reactjs, hints |

## Links

- npm: https://www.npmjs.com/package/ray-hints
- npm.io page: https://npm.io/package/ray-hints

## Dependencies (1)

- [intro.js](https://npm.io/package/intro.js.md) ^2.9.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2018-10-24

## README

# ray-hints

dependencies

* [Intro.js](http://introjs.com/)

## usage

### css

```js
import 'intro.js/introjs.css';
```

### module

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

### Steps demo

* Basic

```js
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

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

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

### TipHints demo

```js
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

```bash
npm install ray-hints --save
```

## Props

### TipSteps props

| param | type | default | description |
| --- | --- | :---: | :---: |
| `enabled` | Boolean | false | 定义`steps`是否可见. |
| `initialStep` | Number | - | 其实步骤. |
| `steps` | [Step[]](#Step) | - | 所有的步骤. |
| `onExit` | `Function: (stepIndex) => {}` | null | 退出时的回调. 注意：当使用内联`Intro.js`事件而不是prop `enabled` 取消步骤时，需要强制跟踪状态. |
| `onBeforeExit` | `Function: (stepIndex) => {}` | null | 退出之前回调. 如果想要阻止退出，在回调中返回 `false` 即可 (since intro.js 0.2.7). |
| `onStart` | `Function: (stepIndex) => {}` | null | 启用后回调. |
| `onChange` | `Function: (nextStepIndex, nextElement) => {}` | null | 当前步骤改变时的回调. |
| `onBeforeChange` | `Function: (nextStepIndex) => {}` | null | 当前步骤改变前的回调. 如果想要阻止`上一个/下一个`，返回 `false` 即可 (since intro.js 2.8.0).* |
| `onAfterChange` | `Function: (nextStepIndex, nextElement) => {}` | null | 更改当前步骤后调用回调. |
| `onPreventChange` | `Function: (stepIndex) => {}` | null | 在 `onBeforeChange`中返回`false`时，将阻止转换为新的步骤. |
| `onComplete` | Function | null | 完成所有步骤后调用回调. |
| `options` | [Object](#Intro.js-options) | `{ hidePrev: true, hideNext: true }` | `Intro.js` 配置参数. |

#### Step

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

### TipHints props

| param | type | default | description |
| --- | --- | :---: | :---: |
| `enabled` | Boolean | false | `TipHints`是否可见. |
| `hints` | [Hint[]](#Hint) | - | 所有的 `TipHints`. |
| `onClick` | Function | - | 点击 `TipHints` 时的回调. |
| `onClose` | Function | - | `TipHints`关闭时的回调. |
| `options` | [Object](#hint-options) | - | `Intro.js` 配置参数. |

#### Hint

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

## Intro.js-options

[Intro.js documentation](http://introjs.com/docs/)

[Intro.js options](https://introjs.com/docs/intro/options/)

[Intro.js code](https://github.com/usablica/intro.js/blob/master/intro.js#L32).

default options `_utils/defaultProps.js` file.

| param | type | description |
| --- | --- | :---: |
| `nextLabel` | String | `下一个` 标签内容. |
| `prevLabel` | String | `上一个` 标签内容. |
| `skipLabel` | String | `跳过` 标签内容. |
| `doneLabel` | String | `完成` 标签内容. |
| `hidePrev` | Boolean | 隐藏第一步中的 `上一个` 按钮. |
| `hideNext` | Boolean | 隐藏最后一步中的 `下一个` 按钮. |
| `tooltipPosition` | String | 提示框位置，可选值 `top,right,bottom,left,'bottom-left-aligned','bottom-middle-aligned','bottom-right-aligned',auto`. |
| `tooltipClass` |String | 提示框样式名. |
| `highlightClass` | String | 高亮浮层的样式名. |
| `exitOnEsc` | Boolean | 按键`ESC`是否退出. |
| `exitOnOverlayClick` | Boolean | 点击浮层是是否退出. |
| `showStepNumbers` | Boolean | 在红色圆圈中显示步骤编号. |
| `keyboardNavigation` | Boolean | 允许使用键盘跳转各个步骤. |
| `showButtons` | Boolean | 显示导航按钮. |
| `showBullets` | Boolean | 显示弹头. |
| `showProgress` | Boolean | 显示进度指示器. |
| `scrollToElement` | Boolean | 是否启用自动滚动到在视窗之外的元素. |
| `scrollTo` | Element | 滚动到指定的元素，当`scrollToElement`为 `true` 时应用. |
| `scrollPadding` | Number | 当`scrollToElement`为 `true` 时，自动填充的padding值，默认`30px` |
| `overlayOpacity` | Number | 浮层透明度. |
| `disableInteraction` | Boolean | 禁用突出显示元素的内部交互. |

## hint-options

| param | type | description |
| --- | --- | :---: |
| `hintPosition` | String | `hint`位置，可选值为 `'top-middle','top-left','top-right','bottom-left','bottom-right','bottom-middle','middle-left','middle-right','middle-middle'`. |
| `hintButtonLabel` | String | `hint`按钮白哦前. |
| `hintAnimation` | Boolean | 是否启用`hint`动画. |

## License

MIT

---
_Source: https://npm.io/package/ray-hints · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._