Getting Started
Installation
To get started with Code Tour, you can install the library using pnpm, yarn or npm. Open your terminal and run one of the following commands:
pnpm i @nguyend-nam/code-tourUsage
Importing CodeTour
Once you have installed Code Tour, you can import the component into your project. In your JavaScript or TypeScript file, add the following import statements:
import { CodeTour } from "@nguyend-nam/code-tour";Don't forget to import the stylesheet into your CSS file:
@import "@nguyend-nam/code-tour/dist/styles.css";Using in the web
Define your CodeTour component within your React component, specifying the steps you want to include. Each step corresponds to segment(s) of your codebase that you want to highlight or replace:
// ...
const str = `function lorem(ipsum, dolor) {
const sit = "lorem ipsum";
dolor = elit(dolor, 3);
while (++consectetur < amet) {
// TODO
}
}`;
<CodeTour
defaultSourceCode={str}
language="javascript"
steps={[
{},
{
focus: [0, [4, 6]],
},
{
focus: 5,
replaces: [
{
line: 5,
values: " sit.eiusmod();",
},
],
},
{
focus: 5,
replaces: [
{
line: 5,
values: ' sit.eiusmod("dolor sit amet");',
},
],
},
{
focus: 6,
replaces: [
{
line: 5,
values: ' sit.eiusmod("dolor sit amet");',
},
],
inserts: [
{
line: 6,
values: " tempor();",
},
],
},
{
focus: 6,
replaces: [
{
line: 5,
values: ' sit.eiusmod("dolor sit amet");',
},
],
inserts: [
{
line: 6,
values: " tempor(ipsum, adipiscing);",
},
],
},
{
replaces: [
{
line: 5,
values: ' sit.eiusmod("dolor sit amet");',
},
],
inserts: [
{
line: 6,
values: " tempor(ipsum, adipiscing);",
},
],
},
{
focus: [4, 7],
replaces: [
{
line: 5,
values: ' sit.eiusmod("dolor sit amet");',
},
],
inserts: [
{
line: 6,
values: " tempor(ipsum, adipiscing);",
},
],
},
{
focus: [4, 7],
replaces: [
{
line: 5,
values: ' sit.eiusmod("dolor sit amet");',
},
{
line: 4,
values: " do {",
},
{
line: 7,
values: " } while (++consectetur < amet);",
},
],
inserts: [
{
line: 6,
values: " tempor(ipsum, adipiscing);",
},
],
},
{
replaces: [
{
line: 5,
values: ' sit.eiusmod("dolor sit amet");',
},
{
line: 4,
values: " do {",
},
{
line: 7,
values: " } while (++consectetur < amet);",
},
],
inserts: [
{
line: 6,
values: " tempor(ipsum, adipiscing);",
},
],
},
]}
/>;
// ...