import { createInstance, HackleProvider } from "@hackler/react-sdk";

const hackleClient = createInstance("YOUR_SDK_KEY")
const user = {
  id: "ae2182e0", 
  properties: {
    app_version: "1.0.1",
    age: 23,
    paying_customer: true
  } 
}
ReactDOM.render(
  <HackleProvider hackleClient={hackleClient} user={user} timeout={1000}>
    <YourApp />
  </HackleProvider>,
  document.getElementById('root')
);

function App() {
  return (
    <HackleExperiment experimentKey={42}>
      <HackleVariation variation={"A"}>
        <OldBlueButton />
      </HackleVariation>
      <HackleVariation variation={"B"}>
        <NewRedButton />
      </HackleVariation>
    </HackleExperiment>
  )
}

const track = useTrack()
const event = {
  key: "purchase",
  value: 5000,
  properties: {
    first_paying: false,
    item_count: 5
  }
}

<button onClick={() => track(event)}>Purchase</button>