Setup Guide

Get started with MonkeyJs in your project. Choose your preferred implementation.

Installation

TypeScript Core (monkeyts)

    
// Using npm
npm install monkeyts
// Using yarn
yarn add monkeyts
// Using pnpm
pnpm add monkeyts
// Using bun
bun add monkeyts

React Implementation (react-monkeyjs)

    
// Using npm
npm install react-monkeyjs
// Using yarn
yarn add react-monkeyjs 
// Using pnpm
pnpm add react-monkeyjs
// Using bun
bun add react-monkeyjs

Basic Usage

Below are simple examples to get started with MonkeyJs. For more detailed usage, refer to our API documentation.

TypeScript Example

Example.ts 
    
import { Tour } from 'monkeyts';

// Define your tour steps
const steps = [
  {
    target: '#step-1',
    title: 'Welcome',
    content: 'This is the first step of your tour!'
  },
  {
    target: '#step-2',
    title: 'Features',
    content: 'Here you can find all the features.'
  }
];

// Initialize tour
const tour = new Tour({
  controllerConfig: { steps },
  tourConfig: { /* your configuration */ }
});

// Start the tour
tour.initTour();
tour.start();

React Example

Example.tsx 
    
import { TourContext, useTourContext } from 'react-monkeyjs';

// Define your tour steps
const steps = [
  {
    target: '#step-1',
    title: 'Welcome',
    content: 'This is the first step of your tour!'
  },
  {
    target: '#step-2',
    title: 'Features',
    content: 'Here you can find all the features.'
  }
];

// Wrap your app with TourContext
function App() {
  return (
    <TourContext 
      steps={steps} 
      config={{ /* your configuration */ }}
    >
      <YourApp />
    </TourContext>
  );
}

// Use the tour in your components
function StartButton() {
  const { start } = useTourContext();
  
  return (
    <button onClick={start}>
      Start Tour
    </button>
  );
}

Next Steps

Now that you've set up MonkeyJs, learn more about: