Socket
Socket
Sign inDemoInstall

@getkoala/react

Package Overview
Dependencies
3
Maintainers
3
Versions
4
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @getkoala/react

React hooks for integrating Koala.


Version published
Weekly downloads
390
increased by25.4%
Maintainers
3
Install size
19.6 kB
Created
Weekly downloads
 

Readme

Source

@getkoala/react

Koala SDK hooks for React.

Install

yarn add @getkoala/react

# install peer dependencies if not already installed
yarn add react react-dom
import React from "react";
import ReactDOM from "react-dom";
import ko from "@getkoala/react";

// Load the Koala SDK immediately
ko.init("<your Koala public API key>");

function App() {
  const [ready, setReady] = React.useState(false);

  // Pseudocode to exemplify getting the logged-in user
  const user = useCurrentUser();

  React.useEffect(() => {
    if (user) {
      ko.identify(user.email, { name: user.name });
    }
  }, [user]);

  React.useEffect(() => {
    ko.ready(() => setReady(true));
  }, []);

  return <div>{ready ? "Ready" : "Loading"}</div>;
}

ReactDOM.render(
  <App />
  document.getElementById("root")
);

Alternative usage

You can also use KoalaProvider to load the SDK and the useKoala hook if necessary, though you should be able to do everything you need using the recommended usage instead.

import React from "react";
import ReactDOM from "react-dom";
import { KoalaProvider, useKoala } from "@getkoala/react";

function App() {
  // You can start using `koala` immediately, but it will asynchronously
  // load in the background. The `ready` flag will indicate when it has
  // it has loaded, if you need to do something after.
  // While loading, `koala` will buffer method calls and execute them
  // after it has finished loaded.
  const { koala, ready } = useKoala();

  // Pseudocode to exemplify getting the logged-in user
  const user = useCurrentUser();

  React.useEffect(() => {
    if (user) {
      koala.identify({ email: user.email, name: user.name });
    }
  }, [koala, user]);

  return <div>{ready ? "Ready" : "Loading"}</div>;
}

ReactDOM.render(
  <KoalaProvider publicApiKey="<your Koala public API key>">
    <App />
  </KoalaProvider>,
  document.getElementById("root")
);

FAQs

Last updated on 20 May 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc