@souranalytics/react

Pickle for React

React package for Pickle analytics.

Install

yarn add @souranalytics/react

Usage

Wrap your root component with PickleProvider.

• Next.js app router: app/layout.tsx
• Next.js pages router: pages/_app.tsx
• CRA / Vite: index.tsx

import { PickleProvider } from '@souranalytics/react'

export default function MyApp() {
  return (
    <PickleProvider key="API_KEY">
      {/* your app contents go here */}
    </PickleProvider>
  )
}

Then use the usePickle hook anywhere in your app.

import { usePickle } from '@souranalytics/react'

export default function Page() {
  const pickle = usePickle()

  return (
    <div>
      <button onClick={() => pickle.event('hello')}>Event</button>
    </div>
  )
}

API

PickleProvider

Props

Option	Type	Description	Required	Default
key	string	Project API key	Yes	-
url	string	Override Pickle API endpoint	No	https://pickle.sh/api
anonymousId	string	Override anonymous user id	No	cuid2

usePickle

const pickle = usePickle()

identify

pickle.identify(user: User | null, data?: UserProps)

Option	Type	Description	Required
user.id	string	User id	Yes
user.name	string	User name	No
user.email	string	User email	No
data	object	User properties	No

event

pickle.event(name: string | null, data?: EventProps)

Option	Type	Description	Required
name	string	Event name	Yes
data	object	Event properties	No

view

pickle.view(name: string | null, data?: ViewProps)

Option	Type	Description	Required
name	string	View name	Yes
data	object	View properties	No

TypeScript

If you have created a plan for your project on Pickle, you can use the Pickle CLI to generate TypeScript types for this library.

This will give you strong types for identify, event, and view methods exposed by usePickle.