npm package: @liquide/react-liquide-sdk-staging
Description: Liquide React SDK
Author: liquide-life
Latest version: 0.0.1

# react-liquide-sdk

> Made with love by Liquide

[![NPM](https://img.shields.io/npm/v/react-liquide-sdk.svg)](https://www.npmjs.com/package/react-liquide-sdk) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Overview

`react-liquide-sdk` is a React SDK created by Liquide to provide seamless integration with Liquide's trading functionalities. This SDK enables developers to easily embed Liquide's components into their React applications.

## Installation

Install the SDK using npm:

## Install

```bash
npm install @liquide/react-liquide-sdk
```
or
```bash
yarn add @liquide/react-liquide-sdk
```

## Usage

First, initialize the SDK with your API key. Then, use the provided components in your application. The components will only render if the API key is valid.

### Initialization

In your main application file, initialize the SDK with your API key:

```typescript
import React, { useEffect } from 'react';
import { Liquide, LiquideTrades } from '@liquide/react-liquide-sdk';

const App = () => {
  useEffect(() => {
    Liquide.initialize('YOUR_API_KEY');
  }, []);

  return (
      <div>
        <LiquideTrades />
      </div>
  );
};

```

### Login User

To interact with user-specific components in this project, a user access token is required for authentication and authorization.

```typescript
import React, { useEffect } from 'react';
import { Liquide, LiquideTrades } from '@liquide/react-liquide-sdk';

const App = () => {
  useEffect(() => {
    Liquide.identifyUser('USER_ACCESS_TOKEN');
  }, ['USER_ACCESS_TOKEN']);

  return (
      <div>
        <LiquideTrades />
      </div>
  );
};

```

### Capture Event

The setCaptureEvent method is responsible for capturing specific events triggered within the application. You can pass the method responsible for capturing events via the setCaptureEvent prop.

```typescript
import React, { useEffect } from 'react';
import { Liquide, LiquideTrades } from '@liquide/react-liquide-sdk';

interface IEventData = {
  name: string
  action: 'click' | 'scroll' | 'hover'
  type: 'button' | 'card' | 'tab' | 'logo'
  context: string
  properties?: Record<string, any>
}

const App = () => {
  useEffect(() => {
    Liquide.setCaptureEvent((data: IEventData) => void)
  }, []);

  return (
      <div>
        <LiquideTrades />
      </div>
  );
};

```

### Components

#### LiquideTrades

```typescript
<LiquideTrades onPress={() => void} onBtnClick={()=> void} btnTitle={'View all'} />
```

#### LiquideDashboard
```typescript
<LiquideDashboard onPress={() => void} navigateTo={'liquide_tab'} />
```

#### LiquidePastTrades
```typescript
<LiquidePastTrades onPress={() => void } />
```


- **onPress**: () => void (optional)
  - This function is triggered when a user who is not logged in attempts to access user-specific components.
- **onBtnClick**: () => void (optional)
  - This function is triggered when the user clicks the call-to-action button in the LiquideTrades carousel.
- **btnTitle**: string (optional)
  - btnTitle prop specifies the label displayed on Liquide trade component button.
- **navigateTo**: string
  - The navigateTo prop is used to set the default view of the Liquide dashboard on initial render.
  - Possible values: liquide_tab, my_dashboard_tab, live_trade_details, past_trade_details, user_trade_details




## License

MIT © [liquide-life](https://github.com/liquide-life)