# Getting Started

## Installation

{% tabs %}
{% tab title="npm" %}
```javascript
npm i @rps-labs/lotto-sdk
```
{% endtab %}

{% tab title="yarn" %}
```javascript
yarn add @rps-sdk/react
```
{% endtab %}

{% tab title="pnpm" %}
```
pnpm i @rps-sdk/react
```
{% endtab %}
{% endtabs %}

* **React Hooks**: Our SDK provides a collection of React hooks that simplify the process of integration. These hooks are designed to be easy to use and customizable, allowing you to tailor the gamification experience to your specific requirements.
* **Prebuilt UI Components**: We offer a selection of prebuilt UI components that are ready to be dropped into your application. Whether you need to display Prize Pool information, highlight Past Winners, showcase Leaderboards, or user activity, our SDK has you covered.
* **RPS Integration**: Our SDK integrates directly into our backend data and smart contract.

## Usage

The `RPSProvider`  is a wrapper component that provides access to all of the SDK’s hooks and UI components. It utilizes the [Provider Pattern](https://www.patterns.dev/posts/provider-pattern/) to share data with all of the components that are nested within it.

Wrap your app in the `RPSProvider` to access the SDK’s functionality from anywhere in your app.

{% hint style="info" %}
API Keys

You will require an API key to use RPS Labs' infrastructure services with the SDK. Obtain an API key by contacting lfg@rpslabs.io and then pass as a prop to the`RPSProvider`.
{% endhint %}



```typescript
import { RPSProvider } from "@rps-labs/lotto-sdk";

function App() {
  return (
    <RPSProvider activeChain="ethereum" apiKey="your-api-key" theme="dark">
      <YourApp />
    </RPSProvider>
  );
}
```

### Configurations

**activeChain (recommended)**

The `activeChain` prop determines which chain you want your app to be operating on.

**apiKey (recommended)**

The `apiKey` prop is required to use the RPS infrastructure services with the SDK.&#x20;

**theme (optional)**

The `theme` prop is an optional prop that lets you choose between `light` and `dark` mode variants of our components.&#x20;

