@solve-io/react-sdk

useSolve

Simple React Hooks for identification with solve.io

Feature

• 👕 Typescript support.
• 🗜️ Clean hooks to track events
• 📤 Easy identification of customers.

Install

yarn add @solve-io/react-sdk

Next.js setup

To install solve on a next.js site. A script tag needs to be added to the _.app.js/.ts file Important Make sure to replace the values with a public api key from your solve admin.

// _.app.js/ts
import { SolveScriptTag } from "@solve-io/react-sdk";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <SolveScriptTag
        apiUrl='https://<YOUR_STACK_NAME>.production.solvestack.net'
        apiKey='<YOUR_SOLVE_PUBLIC_KEY>'
        storeName='<YOUR_STORE_NAME>'
      />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

Gatsby

Create and update gatsby-browser.<t.j>sx with code below. The file gatsby-browser.js lets you respond to Gatsby-specific events within the browser, and wrap your page components in additional global components.

Read more about Gatsby Browser APIs

Important Make sure to replace the values with a public api key from your solve admin.

// gatsby-browser.<t/j>.sx
import * as React from "react";
import { SolveScriptTag } from "@solve-io/react-sdk";
export const wrapPageElement = ({ element }) => {
  return (
    <>
      <SolveScriptTag
        apiUrl="<your_api_url_from_admin>"
        apiKey="<your_api_key_from_admin>"
        storeName="<your_store_name>"
      />
      {element}
    </>
  );
};

Identify customer

import { useSolve } from "@solve-io/react-sdk";

function App() {
  const { identify } = useSolve();

  const subSubscribeToEmail = (event) => {
    identify({ email: event.target.value });
    // perform subscribe
  };
  const handleChange = (event) => {
    // setState, etc
  };
  return (
    <>
      <form onSubmit={subSubscribeToEmail}>
        <label>
          Email:
          <input type="text" value={state.value} onChange={handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    </>
  );
}

PageViews

Solve automatically captures page views when hook included. Custom page views for using with react-router can be added.

function App() {
  const { capturePageView } = useSolve();

  const onPageChange = () => {
    capturePageView();
    navigate("MyPage");
  };

  return (
    <>
      <div>
        <h1>My Page</h1>
        <button onClick={onPageChange}>Change Page</button>
      </div>
    </>
  );
}

Cart creation

Solve identification works best when the cartId is sent to solve when it is first created.

function App() {
  const { captureCart } = useSolve();

  const onAddToCart = async () => {
    // Do something with the cart gid://shopify/Cart/12345 
    const cartId = client.cart.create()
    captureCart({cartId})
  };

  return (
    <>
      <div>
        <h1>My Products</h1>
        <div>
          <p>Cool shoes</p>
        </div>
        <button onClick={onAddToCart}>Add to cart</button>
      </div>
    </>
  );
}

## Contribution

PR & issue welcome.

## License

MIT