Lesabutton NPM

Lesa Components

Installation

Install the Lesa Components package via npm:

npm install lesabutton

Usage

Wrapping with `VinProvider`

Wrap your application with the VinProvider to provide the necessary context for the components. The dealerId is an optional parameter that can be provided by LesAutomotive. It should wrap around your main component template, typically just after the <body> tag.

Example of Wrapping the Main Template

If you’re using Next.js, you can wrap the VinProvider around your custom App component in pages/_app.js or pages/_app.tsx:

// pages/_app.js or pages/_app.tsx

import React from 'react';
import { VinProvider } from 'lesabutton';

function MyApp({ Component, pageProps }) {
  return (
    <VinProvider dealerId="your-dealer-id">
      <Component {...pageProps} />
    </VinProvider>
  );
}

export default MyApp;

Using `LesaButton`

The LesaButton component displays a button that, when clicked, shows a modal with video content. You can customize the button with buttonImage or buttonHtml. If both are provided, buttonHtml has priority.

Example

import React from 'react';
import { LesaButton } from 'lesabutton';

const MyComponent = () => (
  <LesaButton
    vin="your-vin"
    buttonImage="https://example.com/path/to/your/image.jpg"
    buttonHtml="<div style='color: red; font-weight: bold;'>Custom HTML Button</div>"
    className="custom-class"
  />
);

export default MyComponent;

Props for `LesaButton`

Prop	Type	Description
`vin`	`string`	The VIN to fetch video data for.
`buttonImage`	`string`	(Optional) URL of the image to use as the button.
`buttonHtml`	`string`	(Optional) HTML content to use as the button. Takes priority over `buttonImage` if both are provided.
`className`	`string`	(Optional) Additional class names for custom styling.

Full Example

Here’s a full example of how to use the components together in a Next.js project:

Wrapping the Application

// pages/_app.js or pages/_app.tsx

import React from 'react';
import { VinProvider } from 'lesabutton';

function MyApp({ Component, pageProps }) {
  return (
    <VinProvider dealerId="your-dealer-id">
      <Component {...pageProps} />
    </VinProvider>
  );
}

export default MyApp;

Adding the `LesaButton`

// pages/index.js or pages/index.tsx

import React from 'react';
import { LesaButton } from 'lesabutton';

const Home = () => (
  <div>
    <h1>Welcome to Lesa Components Example</h1>
    <LesaButton
      vin="your-vin"
      buttonImage="https://example.com/path/to/your/image.jpg"
      buttonHtml="<div style='color: red; font-weight: bold;'>Custom HTML Button</div>"
      className="custom-class"
    />
  </div>
);

export default Home;

react button modal vin context

7 months ago

7 months ago

7 months ago