# pandaflag-react

> React Pandaflag feature flags integration

Latest version **1.0.2** (published 2024-01-07) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install pandaflag-react
pnpm add pandaflag-react
yarn add pandaflag-react
bun add pandaflag-react
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2024-01-07 |
| First published | 2022-10-15 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=8 |
| Dependencies | 1 |
| Unpacked size | 9.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Julianus01 |
| Maintainers | seejey01 |
| Keywords | react, react hooks, typescript, npm |

## Links

- npm: https://www.npmjs.com/package/pandaflag-react
- Repository: https://github.com/Julianus01/pandaflag-react
- Homepage: https://github.com/Julianus01/pandaflag-react#readme
- Issues: https://github.com/Julianus01/pandaflag-react/issues
- npm.io page: https://npm.io/package/pandaflag-react

## Dependencies (1)

- [socket.io-client](https://npm.io/package/socket.io-client.md) ^4.5.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2024-01-07
- 1.0.1 — 2022-11-08
- 1.0.0 — 2022-10-15

## README

## Pandaflag React SDK

React SDK to easily evaluate Flags in your React web application

## Installation

```
npm install pandaflag-react
```

## Setup the Provider

```tsx
import { PandaflagProvider } from 'react-pandaflag'

const App = () => {
  return (
    <PandaflagProvider apiKey={PROJECT_API_KEY} environment={ENVIRONMENT}>
      ...
    </PandaflagProvider>
  )
}

// PROJECT_API_KEY = Your projects api key found in Pandaflag app In Projects page
// ENVIRONMENT = The environment name for which you initialize the client
```

## Evaluate flags

```tsx
import { useFlags, useFlag, Flag } from 'pandaflag-react'

const AllFlags = () => {
  const flagsData: Flag[] = useFlags()

  if (flagsData.isLoading) {
    return <div>Loading...</div>
  }

  return ...
}

const OneFlag = () => {
  const flagData: Flag = useFlag('maps_v2')
  //  {
  //    isLoading: false,
  //    flag: {
  //      name: 'maps_v2'
  //      description: 'Updated UI version of maps feature'
  //      enabled: true
  //    }
  //  }

  if (flagData.isLoading) {
    return <div>Loading...</div>
  }

  return ...
}
```

---
_Source: https://npm.io/package/pandaflag-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._