### Initialize Storybook in React Project

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Runs the Storybook setup command within your React application's directory. This command will guide you through the process of integrating Storybook into your project, allowing you to develop and view components in isolation.

```bash
getstorybook
```

--------------------------------

### Install and Serve Static Build (npm)

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Installs the 'serve' package globally and then uses it to serve the static 'build' directory of a Create React App project. This is a simple way to deploy static sites.

```sh
npm install -g serve
serve -s build
```

--------------------------------

### Installing React Bootstrap and Bootstrap CSS

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Provides instructions for installing the `react-bootstrap` and `bootstrap` packages using npm or yarn. It highlights that `react-bootstrap` does not include Bootstrap's CSS, which must be installed separately. The example uses `bootstrap@3`.

```bash
npm install --save react-bootstrap bootstrap@3
```

```bash
yarn add react-bootstrap bootstrap@3
```

--------------------------------

### Running Development Server with npm start

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Starts the application in development mode, providing a live-reloading development server. It opens the app at http://localhost:3000 and displays linting errors in the console.

```bash
npm start
```

--------------------------------

### Install Storybook CLI Globally

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Installs the Storybook command-line interface globally on your system. This tool is used to scaffold Storybook projects and manage Storybook configurations.

```bash
npm install -g @storybook/cli
```

--------------------------------

### Add Styleguidist scripts to package.json

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Adds npm scripts to the package.json file for starting the Styleguidist development server and building the style guide for production. These scripts streamline the process of running and deploying Styleguidist.

```diff
   "scripts": {
+    "styleguide": "styleguidist server",
+    "styleguide:build": "styleguidist build",
     "start": "react-scripts start",

```

--------------------------------

### Install npm Dependency

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Installs a new dependency using npm. This command adds the specified package to your project's dependencies.

```sh
npm install --save react-router
```

--------------------------------

### Install Jest-Enzyme for Simplified Assertions

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Commands to install `jest-enzyme`, a library that provides custom Jest matchers for simplifying Enzyme component assertions. This enhances test readability and maintainability.

```sh
npm install --save jest-enzyme
```

```sh
yarn add jest-enzyme
```

--------------------------------

### Netlify CLI Deployment

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Installs the Netlify CLI and deploys the project to Netlify's CDN. It prompts the user to select the build output directory, typically 'build'.

```sh
npm install netlify-cli
netlify deploy
```

--------------------------------

### Control Presentation Start with Callback (TypeScript)

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/README.md

Demonstrates controlling the presentation start using the `startTrigger` state and providing a callback function that executes when the presentation finishes.

```tsx
import * as react from 'react';
import usePresentation from 'react-use-presentation';
import { myFramesArray1 } from './myFramesArray';

export default function App() {
  const [startTrigger, setStartTrigger] = React.useState(false);

  const [PresentationTriggered] = usePresentation({
    framesOptions: myFramesArray1,
    startTrigger,
    callback: () => setStartTrigger(false),
  });

  return (
    <>
      <button type="button" onClick={() => setStartTrigger(true)}>
        Click to start presenting!
      </button>
      <PresentationTriggered />
    </>
  );
}
```

--------------------------------

### Now CLI Deployment

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Installs the Now CLI globally and deploys a built React application to the Now platform. It involves building the app, navigating to the build directory, and running the 'now' command.

```sh
npm install -g now
npm run build
cd build
now --name your-project-name
```

--------------------------------

### Install Enzyme and React Test Renderer

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Commands to install Enzyme and `react-test-renderer` as development dependencies, which are necessary for shallow rendering and other advanced component testing techniques in React.

```sh
npm install --save enzyme react-test-renderer
```

```sh
yarn add enzyme react-test-renderer
```

--------------------------------

### Install `gh-pages` and Deploy to GitHub Pages

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

This snippet shows the npm and yarn commands to install the `gh-pages` package, which is used for deploying React applications to GitHub Pages. It also includes the command to initiate the deployment process after the necessary configurations in `package.json` have been made.

```sh
npm install --save gh-pages

# Alternatively using yarn:
yarn add gh-pages

# Then run the deploy script:
npm run deploy
```

--------------------------------

### Install yarn Dependency

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Installs a new dependency using yarn. This command adds the specified package to your project's dependencies.

```sh
yarn add react-router
```

--------------------------------

### Install React Styleguidist using npm

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Installs the react-styleguidist package as a project dependency using npm. This is the first step to integrating Styleguidist into your React project.

```bash
npm install --save react-styleguidist
```

--------------------------------

### Install React Styleguidist using yarn

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Installs the react-styleguidist package as a project dependency using yarn. This provides an alternative to npm for package management.

```bash
yarn add react-styleguidist
```

--------------------------------

### Install Dependencies for Git Hooks and Prettier

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

These commands install the necessary npm or yarn packages to enable Git hooks for code formatting. Husky is used to manage Git hooks, lint-staged runs scripts on staged files, and Prettier formats the code.

```sh
npm install --save husky lint-staged prettier
```

```sh
yarn add husky lint-staged prettier
```

--------------------------------

### Import Jest-Enzyme Matchers in Setup

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Code snippet to import `jest-enzyme` matchers into your test environment setup file (e.g., `src/setupTests.js`). This makes the custom matchers available globally for all your tests.

```javascript
import 'jest-enzyme';
```

--------------------------------

### Install Source Map Explorer (npm/yarn)

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Installs the source-map-explorer package for analyzing JavaScript bundle sizes. This package helps identify code bloat by visualizing bundle contents.

```sh
npm install --save source-map-explorer
```

```sh
yarn add source-map-explorer
```

--------------------------------

### Initialize Firebase Hosting for React App

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

This snippet demonstrates the command-line interface prompts and actions for initializing Firebase Hosting within a React project. It guides through project selection, database rules configuration, and setting the public directory to 'build' for single-page applications.

```sh
firebase login
firebase init

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? What Firebase project do you want to associate as default? Example app (example-app-fd690)

=== Database Setup

Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data should be read from and written to.

? What file should be used for Database Rules? database.rules.json
✔  Database Rules for example-app-fd690 have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔  Wrote build/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!
```

--------------------------------

### Node.js Express Static File Server

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

A programmatic example using Node.js and Express to serve a Create React App build. It sets up static file serving for the 'build' directory and handles the root route by sending 'index.html'.

```javascript
const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);
```

--------------------------------

### Enable HTTPS in Development (Windows)

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Starts the React development server with HTTPS enabled on Windows Command Prompt. This is useful when proxying to an HTTPS API server. Note the intentional lack of whitespace in the command.

```bash
set HTTPS=true&&npm start
```

--------------------------------

### Initialize Delayed Presentation Component (TypeScript)

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/README.md

Initializes a presentation component with a delayed start. The startDelay option specifies the delay in milliseconds before the presentation begins.

```tsx
import * as react from 'react';
import usePresentation from 'react-use-presentation';
import { myFramesArray2 } from './myFramesArray';

export default function App() {
  const [DelayedPresentation] = usePresentation({
    framesOptions: myFramesArray2,
    startTrigger: true,
    startDelay: 1000,
  });

  return <DelayedPresentation />;
}
```

--------------------------------

### Initialize Basic Presentation Component (TypeScript)

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/README.md

Initializes a basic presentation component using the usePresentation hook. It takes an array of frames and a start trigger option.

```tsx
import * as react from 'react';
import usePresentation from 'react-use-presentation';
import { myFramesArray1 } from './myFramesArray';

export default function App() {
  const [Presentation] = usePresentation({
    framesOptions: myFramesArray1,
    startTrigger: false,
  });

  return <Presentation />;
}
```

--------------------------------

### Enable HTTPS in Development (Linux/macOS)

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Starts the React development server with HTTPS enabled on Linux or macOS using Bash. This is useful when proxying to an HTTPS API server. The server will use a self-signed certificate, likely causing browser warnings.

```bash
HTTPS=true npm start
```

--------------------------------

### Updating react-scripts in package.json

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Demonstrates how to update the `react-scripts` dependency in an existing Create React App project. After updating the version in `package.json`, run `npm install` to apply the changes.

```json
{
  "dependencies": {
    "react-scripts": "<new_version>"
  }
}
```

--------------------------------

### Adding Flow for Static Type Checking

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Details the steps to integrate Flow, a static type checker, into a Create React App project. This involves installing `flow-bin`, configuring `package.json` scripts, initializing Flow with `.flowconfig`, and annotating files with `// @flow` to enable type checking.

```bash
npm install --save flow-bin
```

```bash
yarn add flow-bin
```

--------------------------------

### Eject React App Configuration

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Removes the single build dependency from the project, copying all configuration files (Webpack, Babel, ESLint, etc.) into the project for full control. This is a one-way operation and should be used only if customization is required beyond the default setup.

```bash
npm run eject
```

--------------------------------

### Serve Help Options

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Displays the help information for the 'serve' command, listing all available options and their usage. This is useful for understanding the full capabilities of the 'serve' package.

```sh
serve -h
```

--------------------------------

### Initializing Test Environment with `setupTests.js`

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Shows how to set up a global test environment by creating a `src/setupTests.js` file. This file is automatically executed before tests run and is useful for mocking browser APIs like `localStorage` using Jest mock functions.

```javascript
const localStorageMock = {
  getItem: jest.fn(),
  setItem: jest.fn(),
  clear: jest.fn()
};
global.localStorage = localStorageMock;
```

--------------------------------

### Running Build with Linter Checks in Windows Command Prompt

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Demonstrates how to run the application build process with linter warning checks enabled in a Windows command prompt by setting the `CI` environment variable to `true`. This ensures that the build fails if any linter warnings are present.

```cmd
set CI=true&&npm run build
```

--------------------------------

### Serve with Custom Port Option

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Demonstrates how to use the 'serve' command with the '-p' or '--port' flag to specify a custom port for serving the static build. This allows flexibility in choosing the server port.

```sh
serve -s build -p 5000
```

--------------------------------

### Running Build with Linter Checks in Bash (Linux/macOS)

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Demonstrates how to run the application build process with linter warning checks enabled in a Bash shell (Linux/macOS) by prefixing the command with `CI=true`. This ensures the build fails if linter warnings are detected.

```bash
CI=true npm run build
```

--------------------------------

### Build React App for Production

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Builds the React application for production, optimizing it for performance by minifying code and including hashes in filenames. The output is placed in the 'build' folder, ready for deployment.

```bash
npm run build
```

--------------------------------

### Control Presentation Start with State and Callbacks in React

Source: https://context7.com/the-bugging/react-use-presentation/llms.txt

Shows how to control the start of a presentation using a state variable as the `startTrigger`. This allows for user-initiated presentations, such as a countdown. The `callback` function is used to reset the trigger when the presentation concludes. Dependencies include 'react' and 'react-use-presentation'.

```tsx
import { useState } from 'react';
import usePresentation from 'react-use-presentation';

const introFrames = [
  { component: <h1>3...</h1>, time: 1000 },
  { component: <h1>2...</h1>, time: 1000 },
  { component: <h1>1...</h1>, time: 1000 },
  { component: <h1>Go!</h1>, time: 2000 }
];

function CountdownApp() {
  const [isPlaying, setIsPlaying] = useState(false);

  const [Countdown, frame, total] = usePresentation({
    framesOptions: introFrames,
    startTrigger: isPlaying,
    callback: () => {
      // Reset trigger when presentation ends
      if (frame === total) {
        setIsPlaying(false);
      }
    }
  });

  return (
    <div>
      <button
        onClick={() => setIsPlaying(true)}
        disabled={isPlaying}
      >
        Start Countdown
      </button>
      <Countdown />
    </div>
  );
}

```

--------------------------------

### Run Bundle Analysis

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Commands to first build the production version of the React application and then run the analysis script to inspect the bundle size. This helps in optimizing the application's performance.

```sh
npm run build
npm run analyze
```

--------------------------------

### Initialize Delayed and Looped Presentation (TypeScript)

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/README.md

Initializes a presentation component that starts with a delay and loops continuously. The isLoop option enables looping.

```tsx
import * as react from 'react';
import usePresentation from 'react-use-presentation';
import { myFramesArray3 } from './myFramesArray';

export default function App() {
  const [DelayedAndLoopedPresentation] = usePresentation({
    framesOptions: myFramesArray3,
    startTrigger: true,
    startDelay: 1000,
    isLoop: true,
  });

  return <DelayedAndLoopedPresentation />;
}
```

--------------------------------

### Initialize Multiple Presentations with State (TypeScript)

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/README.md

Demonstrates initializing multiple presentation components simultaneously. It also shows how to access the current frame and total frames for a looped presentation.

```tsx
import * as react from 'react';
import usePresentation from 'react-use-presentation';
import {
  myFramesArray1,
  myFramesArray2,
  myFramesArray3,
} from './myFramesArray';

export default function App() {
  const [Presentation] = usePresentation({
    framesOptions: myFramesArray1,
    startTrigger: false,
  });
  const [DelayedPresentation] = usePresentation({
    framesOptions: myFramesArray2,
    startTrigger: true,
    startDelay: 1000,
  });
  const [DelayedAndLoopedPresentation, currentLoopFrame, loopFramesLength] =
    usePresentation({
      framesOptions: myFramesArray3,
      startTrigger: true,
      startDelay: 1000,
      isLoop: true,
    });

  return (
    <>
      <Presentation />
      <DelayedPresentation />
      <div>
        <p>
          Current frame: {currentLoopFrame}/{loopFramesLength}
        </p>
        <DelayedAndLoopedPresentation />
      </div>
    </>
  );
}
```

--------------------------------

### Simplified Component Assertion with Jest-Enzyme

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

An example showing how to use `jest-enzyme`'s `toContainReact()` matcher for a more concise assertion of component output. This replaces the more verbose `wrapper.contains()` method.

```javascript
expect(wrapper).toContainReact(welcome)
```

--------------------------------

### Define usePresentation Hook Types and Signature

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/README.md

Defines the TypeScript types for `TFrameOptions` and `TUsePresentation`, outlining the expected structure for configuring the `usePresentation` hook. This includes frame configurations, start triggers, delays, and loop settings.

```tsx
type TFrameOptions = {
  component: Component | null;
  time?: number;
};

type TUsePresentation = {
  framesOptions: TFrameOptions[];
  startTrigger: boolean;
  startDelay?: number;
  isLoop?: boolean;
};

usePresentation(TUsePresentation);
```

--------------------------------

### Running Tests Once in Windows Command Prompt

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Illustrates how to execute tests once and exit in a Windows command prompt environment by setting the `CI` environment variable to `true`. This is useful for CI servers or for ensuring tests run non-interactively.

```cmd
set CI=true&&npm test
```

--------------------------------

### Initializing Flow Configuration

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Demonstrates the command to initialize Flow's configuration within a project, creating a `.flowconfig` file in the root directory. This file is essential for customizing Flow's behavior and type-checking rules.

```bash
npm run flow init
```

```bash
yarn flow init
```

--------------------------------

### Referencing Environment Variables in Public HTML

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Illustrates how to embed environment variables directly into your `public/index.html` file using placeholders like `%REACT_APP_WEBSITE_NAME%`. These variables are also injected at build time and must start with `REACT_APP_` (or be built-in like `NODE_ENV`).

```html
<title>%REACT_APP_WEBSITE_NAME%</title>
```

--------------------------------

### Accessing Environment Variables in React Components

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Demonstrates how to access environment variables, such as NODE_ENV and REACT_APP_SECRET_CODE, within React JSX. These variables are embedded during the build process and are available via `process.env`. Ensure variables intended for your app start with `REACT_APP_`.

```jsx
render() {
  return (
    <div>
      <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
      <form>
        <input type="hidden" defaultValue={process.env.REACT_APP_SECRET_CODE} />
      </form>
    </div>
  );
}
```

--------------------------------

### Configuring Travis CI for Builds and Tests

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Provides a sample `.travis.yml` configuration file for setting up continuous integration with Travis CI. It specifies the Node.js version, enables caching for `node_modules`, and defines scripts to run application builds and tests.

```yaml
language: node_js
node_js:
  - 6
cache:
  directories:
    - node_modules
script:
  - npm run build
  - npm test
```

--------------------------------

### React Component Smoke Test with ReactDOM

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

A basic smoke test for a React component that verifies it renders without throwing errors. It uses `ReactDOM.render()` to mount the component into a temporary DOM element. This test is useful as a starting point for component testing.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
});
```

--------------------------------

### Add Swap Space for Build Failures

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Guidance on adding swap space to a build environment to prevent `npm run build` from failing due to insufficient memory. This is a common solution for cloud environments with limited RAM.

```bash
# Example command to add swap space (specifics may vary by OS)
# sudo fallocate -l 1G /swapfile
# sudo chmod 600 /swapfile
# sudo mkswap /swapfile
# sudo swapon /swapfile
```

--------------------------------

### Asserting Component Output with Enzyme and Jest

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

An example demonstrating how to use Enzyme's `shallow()` rendering and Jest's `toEqual()` matcher to assert specific output within a React component. This test checks if the component contains a specific JSX element.

```javascript
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';

it('renders welcome message', () => {
  const wrapper = shallow(<App />);
  const welcome = <h2>Welcome to React</h2>;
  expect(wrapper.contains(welcome)).toEqual(true);
});
```

--------------------------------

### Configure Manual Proxy in package.json

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Allows manual configuration of proxy settings in package.json for API requests. Supports advanced options from http-proxy-middleware and http-proxy. Requests matching the specified paths are proxied, including text/html.

```json
{
  // ...
  "proxy": {
    "/api": {
      "target": "<url>",
      "ws": true
      // ...
    }
  }
  // ...
}
```

--------------------------------

### Configure `package.json` for GitHub Pages Deployment

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

This JavaScript snippet illustrates how to configure the `package.json` file for deploying a React application to GitHub Pages. It includes adding the `homepage` field to specify the deployment URL and adding `predeploy` and `deploy` scripts for the build and deployment process using `gh-pages`.

```js
"homepage": "https://myusername.github.io/my-app",

  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
  }
```

--------------------------------

### Apply Custom CSS Classes to React Presentation

Source: https://context7.com/the-bugging/react-use-presentation/llms.txt

Shows how to apply custom CSS classes to the presentation component for styling purposes. These classes are automatically merged with the internal `animation-frame` class. The example demonstrates styling a presentation with custom background gradients and transitions.

```tsx
import usePresentation from 'react-use-presentation';

const styledFrames = [
  { component: <div>Styled Frame 1</div>, time: 2000 },
  { component: <div>Styled Frame 2</div>, time: 2000 }
];

function StyledPresentation() {
  const [StyledSlides] = usePresentation({
    framesOptions: styledFrames,
    startTrigger: true
  });

  // Custom className is merged with internal classes
  // Result: "animation-frame my-custom-presentation fancy-border"
  return <StyledSlides className="my-custom-presentation fancy-border" />;
}

// CSS (styles.css):
// .animation-frame { transition: opacity 0.3s ease; }
// .animation-frame.with-children { display: flex; flex-direction: column; }
// .my-custom-presentation { background: linear-gradient(to right, #667eea, #764ba2); }

```

--------------------------------

### Implement Looping Presentations with React

Source: https://context7.com/the-bugging/react-use-presentation/llms.txt

Illustrates how to create continuous looping animations by setting the `isLoop` option to `true` in the `usePresentation` hook. This is suitable for background animations or rotating banners. The example defines frames with specific durations and enables looping. Dependencies include 'react-use-presentation'.

```tsx
import usePresentation from 'react-use-presentation';

const loopingFrames = [
  {
    component: (
      <div style={{ backgroundColor: '#ff6b6b', padding: '2rem' }}>
        <h2>Special Offer!</h2>
      </div>
    ),
    time: 3000
  },
  {
    component: (
      <div style={{ backgroundColor: '#4ecdc4', padding: '2rem' }}>
        <h2>Limited Time Only</h2>
      </div>
    ),
    time: 3000
  },
  {
    component: (
      <div style={{ backgroundColor: '#45b7d1', padding: '2rem' }}>
        <h2>Shop Now!</h2>
      </div>
    ),
    time: 3000
  }
];

function RotatingBanner() {
  const [Banner, currentSlide, slideCount] = usePresentation({
    framesOptions: loopingFrames,
    startTrigger: true,
    isLoop: true,  // Continuously loops through frames
    startDelay: 0
  });

  return (
    <div className="banner-container">
      <Banner />
      <div className="indicator">
        Slide {currentSlide} of {slideCount}
      </div>
    </div>
  );
}

```

--------------------------------

### Configuring Flow Scripts in package.json

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Shows how to add Flow-related scripts to the `scripts` section of a project's `package.json` file. This enables running Flow commands like `flow init` and `flow` directly using `npm run` or `yarn`.

```json
"flow": "flow"

```

--------------------------------

### Configure WebSocket Proxy in package.json

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Sets up a proxy for WebSocket connections, essential for real-time communication with libraries like Socket.io. Requires a compatible WebSocket server and setting the 'ws' option to true.

```json
{
  // ...
  "proxy": {
    "/socket": {
      "target": "ws://<socket_url>",
      "ws": true
      // ...
    }
  }
  // ...
}
```

--------------------------------

### Define React Presentation Frames with FrameOptions Type

Source: https://context7.com/the-bugging/react-use-presentation/llms.txt

Explains the `FrameOptions` type used in `react-use-presentation` for defining individual frames within a presentation. Each frame requires a `component` and can optionally specify a `time` (duration in milliseconds). The example shows how to create type-safe frames using TypeScript.

```tsx
import usePresentation, { FrameOptions } from 'react-use-presentation';

// TypeScript type definition
type FrameOptions = {
  component: ReactElement;  // Required: The React component to display
  time?: number;            // Optional: Duration in milliseconds
};

// Example: Creating type-safe frames
const typedFrames: FrameOptions[] = [
  {
    component: <div className="intro">Hello World</div>,
    time: 2000
  },
  {
    component:
      <div className="content">
        <h1>Main Content</h1>
        <p>With nested elements</p>
      </div>,
    time: 3000
  },
  {
    component: <div className="outro">Goodbye!</div>
    // No time = frame persists indefinitely (last frame behavior)
  }
];

function TypedApp() {
  const [Presentation] = usePresentation({
    framesOptions: typedFrames,
    startTrigger: true
  });

  return <Presentation />;
}

```

--------------------------------

### Project Folder Structure in React App

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Illustrates the default folder structure generated by Create React App. Key files like `public/index.html` and `src/index.js` are essential for the build process. Subdirectories within `src` are processed by Webpack for faster rebuilds.

```text
my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
```

--------------------------------

### Importing Third-Party Assertion Libraries

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Demonstrates how to import and use popular third-party assertion and mocking libraries like Chai and Sinon within a React testing environment. This allows developers to leverage familiar tools if they prefer them over Jest's built-in functionalities.

```javascript
import sinon from 'sinon';
import { expect } from 'chai';
```

--------------------------------

### React Router BrowserRouter Basename Prop

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

This JavaScript code example demonstrates how to use the `basename` prop with React Router's `BrowserRouter`. Setting `basename` to a string like `"/calendar"` prefixes all generated links with that path. This is useful for rooting `<Link>` components when the application is not served from the server root.

```javascript
<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="/calendar/today">
```

--------------------------------

### Dynamic Import with Promise (JavaScript)

Source: https://github.com/the-bugging/react-use-presentation/blob/develop/example/README.md

Demonstrates code splitting using dynamic import() which returns a Promise. This allows modules to be loaded on demand.

```javascript
const moduleA = 'Hello';

export { moduleA };
```

```javascript
import React, { Component } from 'react';

class App extends Component {
  handleClick = () => {
    import('./moduleA')
      .then(({ moduleA }) => {
        // Use moduleA
      })
      .catch(err => {
        // Handle failure
      });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Load</button>
      </div>
    );
  }
}

export default App;
```