npm package: @solve-io/react-sdk
Description: Simple React Hooks for identification with solve.io
Latest version: 2.0.1

# useSolve

Simple React Hooks for identification with solve.io

## Feature

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

## Install

```bash
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.

```jsx
// _.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](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/)

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

```javascript
// 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

```jsx
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.

```jsx
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.

```jsx
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
```