Skip to main content

Installation

Install the Easy React SDK in your project.

Package Installation​

npm install @easylabs/react
# or
yarn add @easylabs/react
# or
pnpm add @easylabs/react

Requirements​

  • React: 18.0 or higher
  • Node.js: 20.0 or higher
  • TypeScript: 5.0+ (recommended but optional)

Getting Your API Key​

  1. Sign up at itseasy.co
  2. Navigate to your dashboard
  3. Generate a publishable API key for client-side use
Security

Never use your secret API key in client-side code! Always use the publishable key for the React SDK.

Environment Setup​

Create React App​

Create a .env file in your project root:

Vite:

VITE_EASY_API_KEY=your_publishable_key_here

Use it in your app:

<EasyProvider apiKey={import.meta.env.VITE_EASY_API_KEY}>
  {/* Your app */}
</EasyProvider>

Next.js:

Create a .env.local file:

NEXT_PUBLIC_EASY_API_KEY=your_publishable_key_here

Use it in your app:

<EasyProvider apiKey={process.env.NEXT_PUBLIC_EASY_API_KEY}>
  {/* Your app */}
</EasyProvider>

Other Frameworks​

Create a .env.local file:

NEXT_PUBLIC_EASY_API_KEY=your_publishable_key_here

Use it in your app:

<EasyProvider apiKey={process.env.NEXT_PUBLIC_EASY_API_KEY}>
  {/* Your app */}
</EasyProvider>

Vite​

Create a .env file:

VITE_EASY_API_KEY=your_publishable_key_here

Use it in your app:

<EasyProvider apiKey={import.meta.env.VITE_EASY_API_KEY}>
  {/* Your app */}
</EasyProvider>

TypeScript Configuration​

If using TypeScript, ensure your tsconfig.json includes:

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true
  }
}

Verification​

Verify the installation by importing the package:

import { EasyProvider, useEasy } from "@easylabs/react";

// If this compiles without errors, you're good to go!

Next Steps​