@lvble/react NPM

⚛️⚡ Lvble react component

@lvble/react is a React package that provides a set of core functionalities for building interactive web applications with the lvble platform. It includes widgets.

⚡️ Quick start

NPM

You can install @lvble/react using npm (Node Package Manager). Make sure you have Node.js and npm installed on your machine. Open your terminal or command prompt and run the following command:

npm install @lvble/react

You can then import the react package and start using our great widgets. In your App.js file you create a LvbleProvider:

import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";
import theme from "~/theme";
import { UserProvider } from "./hooks/user";
import rainbow from "~/lib/rainbow";
import MainContent from "./components/MainContent";
import Snackbar from "@mui/material/Snackbar";
import { LvbleProvider, Environment } from "@lvble/react";
import { useState, useCallback } from "react";

function App() {
  const onEvent = useCallback((eventType: string, data: any) => {
    console.debug(`Lvble event: ${eventType} with ${data}`);
    switch (eventType) {
      case "EXPERIENCE_OPENED":
        ...
        break;
      case "EXPERIENCE_CLOSED":
        ...
        break;
      default:
        console.log("Got unknown event", eventType, data);
        break;
    }
  }, []);

  return (
    <LvbleProvider environment={Environment.Local} onEvent={onEvent}>
      <MainContent />
    </LvbleProvider>
  );
}

export default App;

And then you can use the LvbleWidget component:

import { LvbleWidget } from "@lvble/react";

export default function Home() {
  return (
    <div className="flex flex-col gap-12">
      <h1>Home</h1>
      <div className="flex flex-wrap">
        <LvbleWidget token="token" />
      </div>
    </div>
  );
}