Create guided tours in the React app
Today we’ll show you how to create guided tours in the React app.
Sometimes you may need to add a complete guide to your product developed in React. So we will give you the step by step implementation.
Here, we will use the npm package to create tours for sample react application.
Demo Application
Steps to create guided tours in the React app
- Create a react app using multiple components
- Add npm dependency
- Create guided tours for react app
- Output
File Structure
- react-app-tour
- node_modules
- src
- pages
- Content.js
- Footer.js
- Header.js
- Navbar.js
- Sidebar.js
- App.js
- index.css
- index.js
- WebTour.js
- pages
- package-lock.json
- package.json
1. Create a react app using multiple components
First of all, we will create a react web application using multiple components. We will recommend you to check the following article for more information.
Create React Application using Multiple Components
Look at the following file code for your react app.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | import React from 'react'; import Header from './pages/Header'; import Navbar from './pages/Navbar'; import Content from './pages/Content'; import Sidebar from './pages/Sidebar'; import Footer from './pages/Footer'; function App() { return ( <div> <Header /> <Navbar /> <div className="row"> <Content /> <Sidebar /> </div> <Footer /> </div> ); } export default App; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | * { box-sizing: border-box; } /* Style the body */ body { font-family: Arial, Helvetica, sans-serif; margin: 0; } /* Header/logo Title */ .header { padding: 80px; text-align: center; background: #269faf; color: white; } /* Increase the font size of the heading */ .header h1 { font-size: 40px; display: inline; } /* Style the top navigation bar */ .navbar { overflow: hidden; background-color: #333; } /* Style the navigation bar links */ .navbar a { float: left; display: block; color: white; text-align: center; padding: 14px 20px; text-decoration: none; } /* Right-aligned link */ .navbar a.right { float: right; } /* Change color on hover */ .navbar a:hover { background-color: #ddd; color: black; } /* Column container */ .row { display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-wrap: wrap; /* IE10 */ flex-wrap: wrap; } /* Create two unequal columns that sits next to each other */ /* Sidebar/left column */ .side { -ms-flex: 30%; /* IE10 */ flex: 30%; background-color: #f1f1f1; padding: 20px; } /* Main column */ .main { -ms-flex: 70%; /* IE10 */ flex: 70%; background-color: white; padding: 20px; } /* Fake image, just for this example */ .fakeimg { background-color: #aaa; width: 100%; padding: 20px; } /* Footer */ .footer { padding: 20px; text-align: center; background: #ddd; } .footer h2 { display: inline-block; } /* Tour */ .mask { color: #454e5c; opacity: 0.8; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import React, { Component } from 'react'; class Header extends Component { render() { return ( <div className="header"> <h1>Demo Application</h1> <p>Demo application created in React App</p> </div> ); } } export default Header |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import React, { Component } from 'react'; class Navbar extends Component { render() { return ( <div className="navbar"> <a href="#">Home</a> <a href="#">About</a> <a href="#" className="right">Contact</a> </div> ); } } export default Navbar |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import React, { Component } from 'react'; class Content extends Component { render() { return ( <div className="main"> <h2 className="post-title">Lorem Ipsum is simply dummy text of the printing</h2> <h5>quam pellentesque, Dec 10, 2018</h5> <div className="fakeimg" style={{ height: 200 }}>Image</div> <p>Nisi vitae suscipit..</p> <p>Semper quis lectus nulla at. Nullam ac tortor vitae purus faucibus ornare suspendisse. Nunc faucibus a pellentesque sit. Risus quis varius quam quisque id diam vel quam elementum. Ornare aenean euismod elementum nisi quis eleifend quam.</p> <br /> <h2 className="post-title">Placerat vestibulum</h2> <h5>elementum integer enim neque, Sep 21, 2018</h5> <div className="fakeimg" style={{ height: 200 }}>Image</div> <p>Bibendum est ultricies..</p> <p>Semper quis lectus nulla at. Nullam ac tortor vitae purus faucibus ornare suspendisse. Nunc faucibus a pellentesque sit. Risus quis varius quam quisque id diam vel quam elementum.</p> </div> ); } } export default Content |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import React, { Component } from 'react'; class Sidebar extends Component { render() { return ( <div className="side"> <h2 id="sidebar-title">Arcu bibendum</h2> <h5>Sit amet mattis vulputate</h5> <div className="fakeimg" style={{ height: 200 }}>Image</div> <p>Non blandit massa enim nec dui nunc mattis enim. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla..</p> <h3>Massa enim</h3> <p>Lorem ipsum dolor sit ame.</p> <div className="fakeimg" style={{ height: 60 }}>Image</div><br /> <div className="fakeimg" style={{ height: 60 }}>Image</div><br /> <div className="fakeimg last-img" style={{ height: 60 }}>Image</div> </div> ); } } export default Sidebar |
1 2 3 4 5 6 7 8 9 10 11 12 13 | import React, { Component } from 'react'; class Footer extends Component { render() { return ( <div className="footer"> <h2>Footer</h2> </div> ); } } export default Footer |
2. Add npm dependency
Now, we will have a react application and it’s time to add the guided tours in the app. So let’s add the reactour npm dependency in the react app by running the following command.
1 | npm i reactour |
This package is also required the styled-components and react@^16.3
to use the createRef. Run the following command to install styled-components
.
1 | npm i styled-components@^4.0.0 |
3. Create guided tours for react app
To create guided tours, we have to list out the steps and add the styles for the UI. Here, we will create a separate component called WebTour.js
and import it in the root file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | import React, { useState } from 'react'; import Tour from 'reactour'; const stepStyle = { color: '#666', background: '#dff9fb' }; const steps = [ { selector: 'h1', content: "Lorem Ipsum is simply dummy text the printing and typesetting industry.", style: stepStyle }, { selector: '.navbar .right', content: 'Purus sit amet volutpat consequat mauris nunc.', style: stepStyle }, { selector: '.post-title', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', style: stepStyle }, { selector: '#sidebar-title', content: 'Felis donec et odio pellentesque volutpat. Porttitor eget dolor morbi non arcu risus quis varius.', style: stepStyle }, { selector: '.last-img', content: 'Eu consequat ac felis donec et odio pellentesque diam volutpat.', style: stepStyle }, { selector: '.footer h2', content: 'Venenatis tellus in metus vulputate. Duis convallis convallis tellus id.', style: stepStyle } ]; function WebTour() { const [isTourOpen, setIsTourOpen] = useState(true); return ( <Tour steps={steps} isOpen={isTourOpen} rounded={5} stepInteraction={true} maskClassName="mask" accentColor="#269faf" onRequestClose={() => setIsTourOpen(false)} /> ); } export default WebTour; |
We have also added a few more attributes to design the tour. Refer to this link for more information.
Let’s add the WetTour.js
in the App.js
component.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | ... ... import WebTour from './WebTour'; function App() { return ( <div> ... ... <Footer /> <WebTour /> </div> ); } export default App; |
4. Output
Run the application and check the output in the browser.
I hope you find this article is helpful.
Thank you for reading. Happy Coding..!! 🙂