Web (React)

Quick Start Guide for Integrating AmityUIKit's Story Feature into React Applications

Welcome to the Quick Start Guide for integrating Amity Social Cloud's Story feature into your existing React application. This guide provides step-by-step instructions to incorporate social storytelling into your app, enhancing user engagement through shared experiences.

Prerequisites

Before getting started, ensure that you have the following prerequisites installed on your system:

Node.js LTS version (currently version 20)
pnpm version 8

Step 1: Install UIKit and peer dependencies

Install PNPM (Optional)

corepack enable pnpm

Ref: https://pnpm.io/installation#using-corepack

Running Storybook (Optional)

To run Storybook and view the UI components in isolation, follow these steps:

Clone the Amity UI-Kit repository:

git clone https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git

Navigate to the cloned repository's directory:
```
cd Amity-Social-Cloud-UIKit-Web-OpenSource
```
Install the dependencies using pnpm:
```
pnpm install
```
Create a .env file at the root of the project with the following content:
```
STORYBOOK_API_REGION=<API_REGION>
STORYBOOK_API_KEY=<API_KEY>
```
Replace <API_REGION> and <API_KEY> with your actual credentials.
Run Storybook:
```
pnpm run storybook
```
Open your browser and navigate to http://localhost:6006 to view the Storybook interface.

Installation

To install the Amity UI-Kit together with another project, follow these steps:

Clone the repository using the following command:

git clone https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git

Navigate to the cloned repository's directory:
```
cd ./Amity-Social-Cloud-UIKit-Web-OpenSource
```
Install the dependencies using pnpm:
```
pnpm install
```
Build the project:
```
pnpm run build
```
Navigate to your application's directory:
```
cd <path-to-your-app>
```

Link the Amity UI-Kit repository to your application using one of the following package managers:

NPM:

npm link file:<path-to-amity-ui-kit-repository> --save

Yarn (Classic):

yarn add file:<path-to-amity-ui-kit-repository>

PNPM:

pnpm i file:<path-to-amity-ui-kit-repository>

Step 2: Integrating Story Feature

import React from 'react';
import { AmityUiKitProvider, AmityDraftStoryPage } from '@amityco/ui-kit';

export default App = () => {
  return (
      <AmityUiKitProvider
        apiKey={apiKey}
        userId={userId}
        displayName={displayName}
        apiEndpoint={apiEndpoint}  
        apiRegion={apiRegion}
      >
        <AmityDraftStoryPage
            targetId={communityId}
            targetType={"community" | "user" | "content"}
            mediaType={ type: 'image', url: URL.createObjectURL(file) }
        }
        />
      </AmityUiKitProvider>
      )}
  );
};

note : apiEndpoint not required if using default endpoints

Step 3: Customizing the UI

AmityUIKit supports extensive customization options via a config.json file. You can modify themes, colors, and icons for various components and elements of the story feature according to your application's design requirements.

Example customization snippet:

"global_theme": {
  "light_theme": {
    "primary_color": "#FFFFFF",
    "secondary_color": "#AB1234"
  }
}

You can exclude certain UI elements or customize specific components and elements as per your needs.

You have now successfully integrated the Amity Social Cloud Story feature into your Web application. For further customization options, refer to the detailed documentation provided with the SDK. If you encounter any issues or require assistance, our community forum at community.amity.co is always here to help.

Last updated 1 month ago