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:
Step 1: Install UIKit and peer dependencies
Install PNPM (Optional)
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:
Navigate to the cloned repository's directory:
Install the dependencies using pnpm:
Create a
.env
file at the root of the project with the following content:Replace
<API_REGION>
and<API_KEY>
with your actual credentials.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:
Navigate to the cloned repository's directory:
Install the dependencies using pnpm:
Build the project:
Navigate to your application's directory:
Link the Amity UI-Kit repository to your application using one of the following package managers:
NPM:
Yarn (Classic):
PNPM:
Step 2: Integrating Story Feature
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:
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