📝 Self-configuring product tour library for React

Overview


React Spotlight Tour

A self-configuring tutorial library for React.
Blog  |  Docs  |  Demo  |  npm

Features

  • Clean and unobtrusive overlay to highlight the important parts of your app inspired by Chardin.js
  • Lightweight, only depends on React and the Spotlight component can be lazy-loaded
  • Uses composable React hooks to build tutorials rather than selectors
  • Mobile and desktop support
  • Fully typed with TypeScript!

Getting Started

react-spotlight-tour comes with everything you need built into the npm package, no need for integration with bundlers. Install the package with:

$ npm install react-spotlight-tour

Example Usage

import { useState } from 'react';
import { SpotlightTour, useSpotlight } from 'react-spotlight-tour';
import Spotlight from 'react-spotlight-tour/spotlight';

function StatusUpdateInput() {
  const spotlightRef = useSpotlight('Update your status');

  // ...

  return (
    <div ref={spotlightRef}>
      <textarea />
      <button>Update status</button>
    </div>
  );
}

function HomePage() {
  const [isOpen, setOpen] = useState(false);

  return (
    <SpotlightTour
      open={isOpen}
      onClose={() => setOpen(false)}
      Spotlight={Spotlight}
    >
      <StatusUpdateInput />
    </SpotlightTour>
  );
}

Contributing

To test changes locally run:

$ npx tsc --module es2015 --outDir website/src/react-spotlight-tour

You can then see your changes live on the documentation website by running:

$ cd website
$ npm start
Releases(v1.1.0)
Owner
Revere CRE
Defining the future of commercial real estate.
Revere CRE
A lightweight react global state management library

Reate A lightweight react global state management library. ✨ Feature Simple and easy to use, only three APIs

青湛 19 Oct 26, 2021
A state management library for React, heavily inspired by vuex

A state management library for React, heavily inspired by vuex

Dana Janoskova 85 Nov 29, 2021
⛵️ A React library for Solana account management and transaction processing.

sail ⛵️ A React library for Solana account management and transaction handling. Usage import { SailProvider } from "@saberhq/sail";

Saber 32 Nov 28, 2021
Tangle is a super simple, performant, event driven state library for React.

Tangle is a super simple, performant, event driven state library for React.

Luma 4 Oct 13, 2021
DataCamp's Design System and React component library.

DataCamp's Design System and React component library.

DataCamp 2 Nov 9, 2021
A library that makes using pdfjs in react projects easy.

A library that makes using pdfjs in react projects easy.

Lukas Möller 2 Sep 12, 2021
Lightweight auth library based on oidc-client for React single page applications (SPA). Support for hooks and higher-order components (HOC).

Lightweight auth library based on oidc-client for React single page applications (SPA). Support for hooks and higher-order components (HOC).

null 16 Nov 25, 2021
A simple react js onscroll sticky Nav bar library

A simple react js onscroll sticky Nav bar library

Abod Micheal 20 Oct 28, 2021
In this demo, I am using a library created by me, called 'aesthetic-state' for global state managment in React

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Dany Beltran 2 Oct 21, 2021
@use-gesture is a library that let you bind richer mouse and touch events to any component or view.

??Bread n butter utility for component-tied mouse/touch gestures in React

Poimandres 5.6k Dec 2, 2021
Node.js library for building systematic trading strategies in reactive way.

Node.js library for building systematic trading strategies in reactive way. Use the power of TypeScript and Reactive Programming to research, develop

null 2 Nov 24, 2021
Ethereum's missing NFT swap library for web3 developers. Written in TypeScript. Powered by 0x.

NFT Swap SDK _The missing NFT swap SDK for Ethereum and EVM compatible chains, powered by the 0x protocol, written in TypeScript for web3 developers.

trader.xyz 18 Nov 27, 2021
A verification library for COVID-19 Vaccine Passes in New Zealand

A JavaScript implementation of NZ COVID Pass verification, New Zealand's proof of COVID-19 vaccination solution,

Vaxx.nz 25 Nov 28, 2021
Keyborg is a library that tracks the state of current keyboard input on a web page through focus events.

Keyborg ⌨️ ?? Keyborg is a library that tracks the state of current keyboard input on a web page through focus events. It does not do anything invasiv

Microsoft 2 Nov 28, 2021
An algebraic effects library for javascript and typescript using generators

Algebraify Algebraic Effects Are Here! (sort of) (If you're unfamiliar with algebraic effects, here's a great article: Algebraic Effects for the Rest

Jackie Edwards 9 Nov 23, 2021
The history library lets you easily manage session history anywhere JavaScript runs.

history · The history library lets you easily manage session history anywhere JavaScript runs. A history object abstracts away the differences in vari

Remix 7.4k Dec 2, 2021
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

react-universal-hooks React Universal Hooks : just use****** everywhere. Support React >= 16.8.0 Installation Using npm: $ npm install --save react-un

Salvatore Ravidà 163 Nov 16, 2021
React ESI: Blazing-fast Server-Side Rendering for React and Next.js

React ESI: Blazing-fast Server-Side Rendering for React and Next.js React ESI is a super powerful cache library for vanilla React and Next.js applicat

Kévin Dunglas 592 Nov 24, 2021
30 Days of React challenge is a step by step guide to learn React in 30 days

30 Days of React challenge is a step by step guide to learn React in 30 days. It requires HTML, CSS, and JavaScript knowledge. You should be comfortable with JavaScript before you start to React. If you are not comfortable with JavaScript check out 30DaysOfJavaScript. This is a continuation of 30 Days Of JS. This challenge may take up to 100 days, follow your own pace.

Asabeneh 8.6k Nov 28, 2021