Flyout Component Integration Guide

This guide explains how to import and use the Flyout component in your project.

Prerequisites

Before integrating the Flyout component, ensure the following:

1. Your project is set up with React.
2. You have a build system (e.g., Vite, Webpack) that supports SCSS or CSS file imports.
3. The Flyout component package is installed in your project.

Installation

Install the Flyout component package via npm or yarn:

npm install trimble-terra-flyout
# or
yarn add trimble-terra-flyout

Importing the Component

To use the Flyout component, import it into your project as follows:

import { Flyout, FlyoutToggle } from 'trimble-terra-flyout';
import 'trimble-terra-flyout/dist/styles.css'; // Import the styles

Example Usage

Here is an example of how to use the Flyout component in your application:

import React, { useState } from 'react';
import { Flyout, FlyoutToggle } from 'trimble-terra-flyout';
import 'trimble-terra-flyout/dist/styles.css';

const App = () => {
  const [isFlyoutOpen, setFlyoutOpen] = useState(true)

  const handleOpen = () => {
    setFlyoutOpen(true)
  };
  const handleClose = () => {
    setFlyoutOpen(false)
  };

  return (
    <div>
      <h1>Welcome to the App</h1>
      <FlyoutToggle
        isDeployed={isFlyoutOpen}
        onClick={handleOpen}
      />      
      <Flyout
        sectorFlyoutDeployed={isFlyoutOpen}
        authenticated={true}
        close={handleClose}
        profile={{
          name: 'John Doe',
          email: 'john.doe@example.com',
        }}
        customLinks={{
          links: [
            { text: 'Home', url: '/' },
            { text: 'About', url: '/about' },
          ]
        }}
      />
    </div>
  );
};

export default App;