Installation

Install published packages from npm. Web packages use @media-sdk/*@^0.3.0 (core 0.3.1 recommended). Native packages use @media-sdk/native@^0.1.0 with @media-sdk/core@^0.3.1.

Packages

Core (required)

The headless client library. Required for all use cases.

pnpm add @media-sdk/core@^0.3.1

npm install @media-sdk/core@^0.3.1

yarn add @media-sdk/core@^0.3.1

React hooks

Adds MediaProvider and search hooks. Requires React as a peer dependency.

pnpm add @media-sdk/core@^0.3.1 @media-sdk/react@^0.3.0 react react-dom

@media-sdk/core is installed automatically as a runtime dependency of @media-sdk/react.

UI components

Presentational React components. Requires @media-sdk/react (or manual wiring to core).

pnpm add @media-sdk/core@^0.3.1 @media-sdk/react@^0.3.0 @media-sdk/ui-react@^0.3.0 react react-dom

React Native

Hooks and presentational RN components. The SDK is Expo-agnostic — Expo is only used in the example app.

pnpm add @media-sdk/core@^0.3.1 @media-sdk/native@^0.1.0 @media-sdk/ui-native@^0.1.0 react react-native

See the Native installation guide for peer dependencies and env variables.

Peer dependencies

Package	Peer dependencies
@media-sdk/core	None
@media-sdk/react	react ^18.0.0 or ^19.0.0
@media-sdk/ui-react	react ^18.0.0 or ^19.0.0, @media-sdk/react ^0.3.0
@media-sdk/native	react ^18.0.0 or ^19.0.0
@media-sdk/ui-native	react ^18.0.0 or ^19.0.0, react-native >= 0.71.0

Use React 18 or React 19. The SDK does not bundle React.

API keys

Both providers require a free API key.

Provider	Sign up	Env variable (Node)	Env variable (Vite)
Pexels	pexels.com/api	PEXELS_API_KEY	VITE_PEXELS_API_KEY
Pixabay	pixabay.com/api/docs	PIXABAY_API_KEY	VITE_PIXABAY_API_KEY

Node / serverless

# .env
PEXELS_API_KEY=your_pexels_key
PIXABAY_API_KEY=your_pixabay_key

Access via process.env.PEXELS_API_KEY and process.env.PIXABAY_API_KEY.

Vite / browser apps

Vite exposes only variables prefixed with VITE_ to client code:

# .env
VITE_PEXELS_API_KEY=your_pexels_key
VITE_PIXABAY_API_KEY=your_pixabay_key

Access via import.meta.env.VITE_PEXELS_API_KEY and import.meta.env.VITE_PIXABAY_API_KEY.

WARNING

Never commit API keys. Add .env to .gitignore and use .env.example with placeholder values in your repository.

TypeScript setup

The SDK ships with TypeScript declarations. No additional @types/* packages are required.

Ensure your tsconfig.json targets a modern module resolution:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "react-jsx",
    "skipLibCheck": true
  }
}

For Vite projects, use moduleResolution: "bundler" (or "node16" / "nodenext"). For Node ESM scripts, use "module": "NodeNext" and "moduleResolution": "NodeNext".

Vite env types

Add type definitions for import.meta.env in src/vite-env.d.ts:

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_PEXELS_API_KEY: string;
  readonly VITE_PIXABAY_API_KEY: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Verify installation

pnpm add @media-sdk/core@^0.3.1
node -e "import('@media-sdk/core').then(m => console.log(Object.keys(m).slice(0, 5)))"

You should see exports like PexelsMediaClient, PixabayMediaClient, and ApiKeyProvider.

Next steps

• Quick Start — run your first photo search
• PexelsMediaClient — Pexels-specific details
• PixabayMediaClient — Pixabay-specific details