knowingharsh/react-coach-mark

A light weight coach mark library on react for guided UI experience and live tutorials.

React Coach Mark

A light weight coach mark library on react.

Applications

• Intro screen
• Splash screen
• Live tutorials
• Guided experience

Demo

Usage

import { CoachMark, ICoachProps } from "react-coach-mark";

const coach: ICoachProps = {
        activate: true,
        component: <div>Any Component You Want</div>,
        reference: ref,
        tooltip: { position: 'bottom' }
    };
<CoachMark {...coach} />

Project Structure

src folder contains demo as well as library code. Go to the lib folder from here to check the source code.

Installation

To install

npm i react-coach-mark

To contribute or play-around with the project

git clone https://github.com/hashlucifer/react-coach-mark.git 
npm install 
npm start 

Integration code

There are just 4 params you need to feed in as basic props.

• activate : boolean to enable/disable the black screen
• component : Element can be any valid React Node.
• reference : will be react ref
• tooltip : having position of tooltip w.r.t focused element on screen.

Check out demo file here for integrations steps.

You control the flow and view

Step 1: Create and Assign ref (hooks version), it also works for class version.

const ref1 = useRef(null);
const ref2 = useRef(null);
// assign it to div
<h1 ref={ref1}>Coach Mark</h1>
<p ref={ref2}>Any ref based element</p>

Step 2: Create state and write your next/prev/skip handlers

const [activatedNumber, setActivateNumber] = useState<number>(0);
const NextButton = <button onClick={() => setActivateNumber(activatedNumber + 1)}>Next</button>;

Step 3: You control the flow, you control the components it will render.

 const coachList: Array<ICoachProps> = [
    {
        activate: activatedNumber === 0,
        component: <div>I can do this {NextButton} </div>,
        reference: ref1,
        tooltip: { position: 'bottom' }
    },
    {
        activate: activatedNumber === 1,
        component: <div>I can be long. {NextButton}</div>,
        reference: ref2,
        tooltip: { position: 'top' }
    }
 ]

const coach : ICoachProps = coachList[activatedNumber]

Step 4: Just pass the configuration to the coach mark

<CoachMark {...coach} />

Sample Screenshot

Please note that : This works individually as well by calling it twice <CoachMark {...coach1} /> and <CoachMark {...coach2} /> but it might not give smooth css transition for one focus to another.

You can override classes for your own css customization

Please feel free to connect and contribute, Happy Coding.

react-coach-mark's Issues

How did you publish the package?

I had to publish some changes to npm registry, would you add me as an publisher or could you publish it?

Library doesn't work. Demo is broken.

Did anyone get this to work?

Possible issue on initial rendering of component

Good afternoon. I just wanted to share a potential issue I came across with the Coach component. It seems that on initial rendering the component doesn't render even when using the sample code provided in the README.md. It seems that just adding a timeout through a useEffect is a workaround for now, but wanted to raise the issue. Also I put together a github repo to demonstrate this:

https://github.com/ronbravo/react-coach-mark-bug-demo

Thanks and take care.

Overlay scroll disable

The overlay doesn't disable the scroll on other components of the screen. How should i do that?

After installing the react-coach-marks package, I couldn't find the src and lib folders in the node_modules/react-coach-marks directory.

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\Prasanth.M\Desktop\sample\frontend-react\node_modules\react-coach-mark\src\lib\utilities\coach.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Users\Prasanth.M\Desktop\sample\frontend-react\node_modules\react-coach-mark\src\lib\utilities\coach.tsx'

WARNING in ./node_modules/react-coach-mark/dist/utilities/common.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\Prasanth.M\Desktop\sample\frontend-react\node_modules\react-coach-mark\src\lib\utilities\common.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Users\Prasanth.M\Desktop\ezscm\frontend-react\node_modules\react-coach-mark\src\lib\utilities\common.tsx'

WARNING in ./node_modules/react-coach-mark/dist/utilities/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\Prasanth.M\Desktop\sample\frontend-react\node_modules\react-coach-mark\src\lib\utilities\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Users\Prasanth.M\Desktop\ezscm\frontend-react\node_modules\react-coach-mark\src\lib\utilities\index.tsx'

Failed to compile.

Hi Team, @knowingharsh

Now, I can't import react-coach-mark after installing this lib

Module not found: Error: Can't resolve 'react-coach-mark'

Lib needs to load less

In my project we doesn't use less, but this lib's stylesheet needs loaders to use less.

Error outputs:

ERROR in ./node_modules/react-coach-mark/dist/styles/index.less 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import "./coach-mark.less";
 @ ./node_modules/react-coach-mark/dist/index.js 2:0-29