@agrid/react

React components and hooks for integrating Agrid into your React applications.

Installation

npm install agrid-js @agrid/react
# or
yarn add agrid-js @agrid/react
# or
pnpm add agrid-js @agrid/react

Quick Start

Using AgridProvider

import { AgridProvider } from '@agrid/react'

function App() {
  return (
    <AgridProvider
      apiKey="YOUR_PROJECT_API_KEY"
      options={{ api_host: 'https://us.i.agrid.com' }}
    >
      <YourApp />
    </AgridProvider>
  )
}

Using Hooks

import { useAgrid, useFeatureFlagEnabled } from '@agrid/react'

function MyComponent() {
  const agrid = useAgrid()
  const isNewFeatureEnabled = useFeatureFlagEnabled('new-feature')

  const handleClick = () => {
    agrid?.capture('button_clicked', {
      button_name: 'Sign Up'
    })
  }

  return (
    <div>
      {isNewFeatureEnabled && <NewFeature />}
      <button onClick={handleClick}>Click me</button>
    </div>
  )
}

Available Hooks

• useAgrid() - Get the Agrid client instance
• useFeatureFlagEnabled(flag) - Check if a feature flag is enabled
• useFeatureFlagPayload(flag) - Get feature flag payload
• useFeatureFlagVariantKey(flag) - Get feature flag variant key
• useActiveFeatureFlags() - Get all active feature flags

Components

• AgridProvider - Context provider for Agrid
• AgridErrorBoundary - Error boundary component for React error tracking

Documentation

For complete documentation, see the main repository README.

License

MIT License - see LICENSE file for details.