@launchbase/react

The Launchbase SDK for React

Usage no npm install needed!

<script type="module">
  import launchbaseReact from 'https://cdn.skypack.dev/@launchbase/react';
</script>

README

Launchbase's SDK for React.
The SDK is also documented in the Launchbase Docs.

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.

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

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 at Varld