Package Exports

@solve-io/react-sdk
@solve-io/react-sdk/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@solve-io/react-sdk) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

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