open-index/open-npm huggingface dataset:
npm package: @launchbase/core
Description: The Launchbase SDK for HTML and JavaScript
Author: Tobias Herber
Latest version: 0.1.7

<p align="center">
  <img src="https://raw.githubusercontent.com/varld/launchbase-sdk/main/assets/banner-core-sdk.png" width="100%" />
</p>

<p align="center">
  Launchbase's SDK for JavaScript and HTML.
  <br />
  The SDK is also documented in the <a href="https://launchbase.work/docs/library/javascript">Launchbase Docs</a>.
</p>

## Install

```
# yarn
yarn add @launchbase/core

# npm
npm install @launchbase/core
```

## Usage

### HTML

```html
<html>
  <head>
    <!-- head content -->
  </head>
  <body>
    <!-- body content -->

    <!-- 
      Place this element wherever you want to. 
      You can style and customize it however you want, 
      just make sure it has the `data-launchbase` attribute. 
    -->
    <button data-launchbase>Get Early Access</button>

    <!-- 
      Make sure to replace the scripts at the bottom of the body.
    -->
    <script async src="https://unpkg.com/@launchbase/core"></script>
    <script>
      window.launchbaseConfig = {
        integrationKey: '{{integrationKey}}'
      };
    </script>
  </body>
</html>
```

> Make sure the replace `{{integrationKey}}` with the integration key of your Launchbase project.

Launchbase will automatically attach to any element with the `data-launchbase` attribute. The button above is just an example.

### JavaScript

The JavaScript SDK can be used to programmatically open and close a launchbase widget.

```javascript
import { open, close, toggle, setup } from '@launchbase/core';

// Before you can use the Launchbase SDK, you have to set it up.
launchbase.setup({
  integrationKey: '{{integrationKey}}'
});

// After setting everything up, you can open the Launchbase widget.
launchbase.open();

// Close the widget
launchbase.close();

// Toggle the widget
launchbase.toggle();
```

## API

### `launchbase.setup(config: LaunchbaseConfig)`

Setup launchbase to work with your project

#### `config: LaunchbaseConfig`

This configuration object can be passed to `launchbase.setup` or set as `window.launchbaseConfig`.

```typescript
{
  // A Launchbase integration key (required)
  integrationKey: string;

  // Optional theming settings
  theme?: {
    color?: string;
    textColor?: string;
  };

  // Optionally prefill name or email
  prefill?: {
    email?: string;
    name?: string;
  };
}
```

### `launchbase.open()`

Open the Launchbase widget

### `launchbase.close()`

Close the Launchbase widget

### `launchbase.toggle()`

Toggle the Launchbase widget

## License

MIT © [Tobias Herber](https://herber.space) at [Varld](https://varld.co)
npm package: @launchbase/react
Description: The Launchbase SDK for React
Author: Tobias Herber
Latest version: 0.1.7

<p align="center">
  <img src="https://raw.githubusercontent.com/varld/launchbase-sdk/main/assets/banner-react-sdk.png" width="100%" />
</p>

<p align="center">
  Launchbase's SDK for React.
  <br />
  The SDK is also documented in the <a href="https://launchbase.work/docs/library/react">Launchbase Docs</a>.
</p>

## Install

```
# yarn
yarn add @launchbase/react

# npm
npm install @launchbase/react
```

## Usage

### Hook

The `useLaunchbase`-hook enables you to open and close the launchbase widget. It also provides the `isOpen` property, which makes the open-state of the widget observable.

```javascript
import useLaunchbase from '@launchbase/react';

let Component = () => {
  let { open, close, toggle, isOpen } = useLaunchbase({
    integrationKey: '{{integrationKey}}'
  });

  return (
    <div>
      <p>Launchbase is {isOpen ? 'open' : 'closed'}.</p>

      <button onClick={open}>Open Launchbase</button>
      <button onClick={toggle}>Toggle Launchbase</button>
      <button onClick={close}>Close Launchbase</button>
    </div>
  );
};
```

### Button

```javascript
import { LaunchbaseButton, setup } from '@launchbase/react';

setup({
  integrationKey: '{{integrationKey}}'
});

let Component = () => {
  return (
    <div>
      <LaunchbaseButton
        // You can pass any props you could normally pass to a button
        style={{
          padding: '8px 12px',
          borderRadius: 5,
          color: 'white',
          background: 'black',
          border: 'none'
        }}
      >
        Get Early Access
      </LaunchbaseButton>
    </div>
  );
};
```

## License

MIT © [Tobias Herber](https://herber.space) at [Varld](https://varld.co)