open-index/open-npm huggingface dataset:
npm package: @lvble/core
Description: **@lvble/core** is a JavaScript package that provides a set of core functionalities for building interactive web applications with the lvble platform. It includes widgets and modals.
Latest version: 3.94.0

# @lvble/core

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

## ⚡️ Quick start

### NPM

You can install **@lvble/core** 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:

```bash
npm install @lvble/core
```

In your `index.html`:

```html
<html>
  <head>
    <title>PMS</title>
  </head>

  <body>
    <h1>Welcome to the best PMS ever!</h1>
    <table style="width: 50%; margin: 0 auto;">
      <tr>
        <th>Lvble</th>
      </tr>
      <tr>
        <td><button onclick="openLvbleExperience()">Lvble</button></td>
      </tr>
      <tr>
        <td>Status</td>
      </tr>
    </table>
    <script type="module" src="/main.js"></script>
  </body>
</html>
```

And in your `main.js` file:

```javascript
import { Lvble } from "@lvble/core";
// Widgets
const l = Lvble({
  environment: "sandbox",
  onEvent: function (eventType: string, data: any) {
      switch (eventType) {
        case "EXPERIENCE_OPENED":
          ...
          break;
        case "EXPERIENCE_CLOSED":
          ...
          break;
          ...
        default:
          break;
      }
  }
});
const lvbleWidget = l.createWidget({
  token: "token"
});

document
  .getElementById("lvble-widget")
  .appendChild(lvbleWidget);

// Lvble experience
const openLvbleExperience = () =>
  l.open({
    token: "token"
  });

```

### `<script>` tag

Alternatively, you can include **@lvble/core** directly in your HTML file using a script tag like it's 1997 😎  
Add the following line inside the `<head>` or at the end of the `<body>` tag:

```html
<script src="https://unpkg.com/@lvble/core"></script>
```

Please refer to the documentation of **@lvble/core** for a complete list of available functionalities and their usage instructions.

## License

[MIT](LICENSE)
npm package: @lvble/react
Description: **@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.
Latest version: 3.94.0

# ⚛️⚡ 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:

```bash
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`:

```ts
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:

```ts
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>
  );
}
```

## License

[MIT](LICENSE)