# @guiderjs/react > Customizable and animated React component for creating guide on your website. Latest version **0.2.7** (published 2023-01-18) · MIT license · 0 weekly downloads ## Install ```sh npm install @guiderjs/react pnpm add @guiderjs/react yarn add @guiderjs/react bun add @guiderjs/react ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.2.7 | | Published | 2023-01-18 | | First published | 2022-12-21 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 45.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Debonex | | Maintainers | debonex | | Keywords | react, guiderjs, guider, intro, typescript, ui-library | ## Links - npm: https://www.npmjs.com/package/@guiderjs/react - Repository: https://github.com/Debonex/guiderjs - Homepage: https://github.com/Debonex/guiderjs#readme - Issues: https://github.com/Debonex/guiderjs/issues - npm.io page: https://npm.io/package/@guiderjs/react ## Dependencies (1) - [@guiderjs/core](https://npm.io/package/@guiderjs/core.md) ^0.2.0 ## 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.2.7 (latest) — 2023-01-18 - 0.2.6 — 2023-01-18 - 0.2.5 — 2023-01-16 - 0.2.4 — 2023-01-13 - 0.2.3 — 2023-01-12 - 0.2.2 — 2023-01-12 - 0.2.1 — 2023-01-10 - 0.2.0 — 2023-01-05 - 0.1.1 — 2022-12-21 - 0.1.0 — 2022-12-21 ## README # Guiderjs React A React component for creating customizable and animated guider on your website. ## Get started ### Installation ```shell # npm $ npm install @guiderjs/react # yarn $ yarn add @guiderjs/react ``` ### usage ```tsx // App.tsx import Guider, { IGuider, Step } from "@guiderjs/react"; import { FC, useRef } from "react"; const App: FC = () => { // guider instance const guider = useRef(null); // guider steps const steps: Step[] = [{ key: "card", target: ".card" }]; return (
Card content
); }; ``` ### API #### IGuider ```ts interface IGuider { /** * start guider from the step has given key, if no step key given, start from the first step. * guider needs to be `show` or `stop` status * @param stepKey key of the step to start */ start: (stepKey?: string) => void; /** * go to next step, if current step is the last step, exit */ next: () => void; /** * go back one step, if current step is the first step, do nothing. */ back: () => void; /** * exit guider */ exit: () => Promise; } ``` #### Component props | props | description | type | default | | ------------------------ | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | --------- | | steps (required) | an array contains info of guider steps | Step[] | - | | onStart | the callback function when guider start | () => void | - | | onExit | the callback function when guider exited | () => void | - | | target | selector to select target (highlighted) element | string | - | | targetClass | className of target | string | - | | preventTarget | if prevent interaction of origin target element | boolean | true | | onTargetClick | the callback function when user click target (highlighted) part | () => void | - | | overlayColor | background color of overlays | string | "#333333" | | overlayOpacity | opacity of overlays | number | 0.5 | | overlayClass | className of overlays | string | - | | zIndex | zindex property of guider container | number | 99999 | | popover | popover element | React.ReactElement | - | | popoverPosition | position of popover (works when you have popover) | "auto" \| "center" \| "target-top" \| "target-bottom" \| "target-left" \| "target-right" | "auto" | | popoverAnchor | popover position to target | "start"\|"middle"\|"end" | "middle" | | popoverGap | gap (px) between popover and target, (works when you have popover and target) | number | 8 | | popoverLeft | left property of popover | string | "0px" | | popoverTop | top property of popover | string | "0px" | | popoverAnimation | popover animation name | string | "flip-y" | | popoverAnimationDuration | popover animation duration | string | "400ms" | | popoverAnimationFunction | popover animation timing function | string | "ease" | | onStepStart | the callback function when step start | (step:Step,index:number) => void | - | | onStepExit | the callback function when step exit | (step:Step,index:number) => void | - | #### Step (info of one guider step, will override component props) | property | description | type | default | | ------------------------ | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | --------- | | key (required) | unique key of step | string | - | | target | selector to select target (highlighted) element | string | - | | targetClass | className of target | string | - | | preventTarget | if prevent interaction of origin target element | boolean | true | | onTargetClick | the callback function when user click target (highlighted) part | () => void | - | | overlayColor | background color of overlays | string | "#333333" | | overlayOpacity | opacity of overlays | number | 0.5 | | overlayClass | className of overlays | string | - | | zIndex | zindex property of guider container | number | 99999 | | popover | popover element | React.ReactElement | - | | popoverPosition | position of popover (works when you have popover) | "auto" \| "center" \| "target-top" \| "target-bottom" \| "target-left" \| "target-right" | "auto" | | popoverAnchor | popover position to target | "start"\|"middle"\|"end" | "middle" | | popoverGap | gap (px) between popover and target, (works when you have popover and target) | number | 8 | | popoverLeft | left property of popover | string | "0px" | | popoverTop | top property of popover | string | "0px" | | popoverAnimation | popover animation name | string | "flip-y" | | popoverAnimationDuration | popover animation duration | string | "400ms" | | popoverAnimationFunction | popover animation timing function | string | "ease" | | onStepStart | the callback function when step start | (step:Step,index:number) => void | - | | onStepExit | the callback function when step exit | (step:Step,index:number) => void | - | | payload | step payload | any | - | --- _Source: https://npm.io/package/@guiderjs/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._