react-shepherd - GitLite

KO | EN

gitlite — search

#javascript #llm #golang #android #machine-learning #docker #java #windows #awesome #awesome-list #vue #pytorch #openai #open-source

react-shepherd

(★ 641)

A React wrapper for the site tour library Shepherd

파일 탐색기

최종 버전 다운로드 (.zip)

- - ghpages.yml
  - publish.yml
  - test.yml
- dependabot.yml
- - .eslintrc.json
  - astro.config.mjs
  - jsconfig.json
  - package.json
  - README.md
  - yarn.lock
- - .eslintrc.js
  - CHANGELOG.md
  - jest.config.js
  - package.json
  - README.md
  - rollup.config.js
  - tsconfig-declarations.json
  - tsconfig.json
.babelrc
.editorconfig
.gitignore
.nvmrc
CHANGELOG.md
netlify.toml
package.json
README.md
RELEASE.md
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/shepherd-pro/react-shepherd

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-shepherd

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install --save react-shepherd

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

**This repository is no longer being maintained and all further development is at the main [shepherd](https://github.com/shepherd-pro/shepherd/tree/main/packages/react) repo.**

# react-shepherd

<div>
  <a href="https://shipshape.io">
    <img align="left" src="http://i.imgur.com/DWHQjA5.png" alt="Ship Shape" width="50" height="50"/>
  </a>

**[react-shepherd is built and maintained by Ship Shape. Contact us for web app consulting, development, and training for your project](https://shipshape.io/)**.

</div>

[![NPM](https://img.shields.io/npm/v/react-shepherd.svg)](https://www.npmjs.com/package/react-shepherd)
[![Test Status](https://github.com/shipshapecode/react-shepherd/workflows/Test/badge.svg)](https://github.com/shipshapecode/react-shepherd/actions?query=workflow%3ATest)
[![Maintainability](https://api.codeclimate.com/v1/badges/d5273e1d465352a6df4e/maintainability)](https://codeclimate.com/github/shipshapecode/react-shepherd/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/d5273e1d465352a6df4e/test_coverage)](https://codeclimate.com/github/shipshapecode/react-shepherd/test_coverage)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

This is a React wrapper for the [Shepherd](https://github.com/shipshapecode/shepherd), site tour, library.
It's mainly a wrapper around the Shepherd library that exposes the tour object and methods to the context object
that can be passed into props for dynamic interactivity.

## Install

```bash
npm install --save react-shepherd
```

## Usage

### Via Provider/Context

```jsx
import React, { Component, useContext } from "react";
import { ShepherdTour, ShepherdTourContext } from "react-shepherd";
import newSteps from "./steps";

const tourOptions = {
  defaultStepOptions: {
    cancelIcon: {
      enabled: true,
    },
  },
  useModalOverlay: true,
};

function Button() {
  const tour = useContext(ShepherdTourContext);

return (
    <button className="button dark" onClick={tour.start}>
      Start Tour
    </button>
  );
}

export default function App() {
  return (
    <div>
      <ShepherdTour steps={newSteps} tourOptions={tourOptions}>
        <Button />
      </ShepherdTour>
    </div>
  );
}
```

### Via Hook

```jsx
import React, { Component } from "react";
import { useShepherdTour } from "react-shepherd";
import newSteps from "./steps";

const tourOptions = {
  defaultStepOptions: {
    cancelIcon: {
      enabled: true,
    },
  },
  useModalOverlay: true,
};

export default function App() {
  const tour = useShepherdTour({ tourOptions, steps: newSteps });

return (
    <button class="button dark" onClick={tour.start}>
      Start Tour
    </button>
  );
}
```

## Configuration

The following configuration options for a tour can be set on the ShepherdTour to control the way that Shepherd is used. This is simply a POJO passed to Shepherd to use the options noted in the Shepherd Tour [options](https://shepherdjs.dev/docs/Tour.html).
**The only required option is `steps`, which is an array passed to the props.**

### tourOptions

`PropTypes.object`
Used to set the options that will be applied to each step by default. You can pass in any of the options that you can with Shepherd.

### steps

`PropTypes.array`
You must pass an array of steps to `steps`, something like this:

```js
const steps = [
  {
    id: 'intro',
    attachTo: { element: '.first-element', on: 'bottom' },
    beforeShowPromise: function () {
      return new Promise(function (resolve) {
        setTimeout(function () {
          window.scrollTo(0, 0);
          resolve();
        }, 500);
      });
    },
    buttons: [
      {
        classes: 'shepherd-button-secondary',
        text: 'Exit',
        type: 'cancel'
      },
      {
        classes: 'shepherd-button-primary',
        text: 'Back',
        type: 'back'
      },
      {
        classes: 'shepherd-button-primary',
        text: 'Next',
        type: 'next'
      }
    ],
    classes: 'custom-class-name-1 custom-class-name-2',
    highlightClass: 'highlight',
    scrollTo: false,
    cancelIcon: {
      enabled: true,
    },
    title: 'Welcome to React-Shepherd!',
    text: ['React-Shepherd is a JavaScript library for guiding users through your React app.'],
    when: {
      show: () => {
        console.log('show step');
      },
      hide: () => {
        console.log('hide step');
      }
    }
  },
  // ...
];
```

## Steps

The options are the same as Shepherd [options](https://shepherdjs.dev/docs/Step.html).

## License

MIT