React components to create a delightful interactive journey.
Add to your project using npm i -S react-journey
- Wrap your application in the
JourneyProvider
. react-journey provides aJourneyComponent
out of the box, but it is unstyled. You will most likely want to provide your own styled component in place of this.
import React from 'react';
import { JourneyComponent, JourneyProvider } from 'react-journey';
ReactDOM.render(
<JourneyProvider Component={JourneyComponent}>
<App />
</JourneyProvider>,
document.getElementById('root')
);
- Wrap any HTML that you want to include in the journey in a
JourneyStep
. You should provide a message prop for the step to show.
import React from 'react';
import { JourneyStep } from 'react-journey';
const MyApp = () => (
<JourneyStep message="Header">
<p>A step in the journey!</p>
</JourneyStep>
);
- Call run on the journey to get it started, and stop if you want to stop it.
import React from 'react';
import { useJourney } from 'react-journey';
function App() {
const { run, stop } = useJourney();
useEffect(() => {
run();
return stop;
});
return (
<p>My app</p>
);
}
You can use the useStep
hook if you don't want to use the JourneyStep
component. If you don't want to alter your HTML structure for example.
import React, { useEffect, useRef } from 'react';
import { useJourney } from 'react-journey';
function App() {
const { useStep } = useJourney();
const el = useRef(null);
useStep(el, 'This is the message for this element');
return (
<p ref={el}>My app</p>
);
}
You can manually registerāand unregisterāelements from the tour if you don't want to use the JourneyStep
component or the useStep
hook. If you don't want to alter your HTML structure for example.
import React, { useEffect, useRef } from 'react';
import { useJourney } from 'react-journey';
function App() {
const { register, unRegister } = useJourney();
const el = useRef(null);
useEffect(() => {
const { current } = el;
register(current, 'This is the message for this element');
return () => unRegister(current);
}, [register, unRegister]);
return (
<p ref={el}>My app</p>
);
}
Please raise any issues on the GitHub repo.
See CONTRIBUTING.md.