Web (React)

Installation

There are two ways to install and integrate the Amity UI Kit into your project:

NPM Installation

This section is about installing managed uikit through dependency manager (SwiftPM). If you have already installed our Open Source UIKit, you can skip this section.

Install the Amity UI Kit package from npm by running the following command:
```
npm install @amityco/ui-kit
```

Import the required components and provider into your project:

import { AmityUiKitProvider, AmityUiKitSocial } from "@amityco/ui-kit";

Wrap your application with the AmityUiKitProvider component and provide the necessary configuration:

import React from "react";
import { AmityUiKitProvider, AmityUiKitSocial } from "@amityco/ui-kit";

const App = () => {
  const userId = "<your USER ID here>";
  const apiKey = "<your API key here>";

  return (
    <AmityUiKitProvider
      key={userId}
      apiKey={apiKey}
      userId={userId}
      displayName={userId}
    >
      <AmityUiKitSocial />
    </AmityUiKitProvider>
  );
};

export default App;

Replace <your USER ID here> and <your API key here> with your actual user ID and API key.

Open-source Installation

With open-source, developers have more flexibility and greater customization options, allowing you to have complete control over the visual style. Open sourcing allows for more transparency and visibility and enables contributions from a greater developer community in terms of good design, implementation, code improvement, and fixes, translating into a better product and typical development.

Clone the Amity UI Kit open-source repository from GitHub:

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

Navigate to the cloned repository directory:
```
cd Amity-Social-Cloud-UIKit-Web-OpenSource
```
Install the dependencies:
```
npm install
```
Build the UI Kit:
```
npm run build
```
Link the UI Kit to your project:
```
npm link
```
In your project, link the Amity UI Kit package:
```
npm link @amityco/ui-kit-open-source
```

Import the required components and provider into your project:

import { AmityUiKitProvider, AmityUiKitSocial } from "@amityco/ui-kit-open-source";

Wrap your application with the AmityUiKitProvider component and provide the necessary configuration (same as in Method 1).

Customization

The Amity UI Kit provides various customization options to tailor the visual style and behavior of the components to fit your application's needs. To customize the UI Kit, follow these steps:

Fork the Amity UI Kit repository on GitHub.
Clone your forked repository to your local machine.
Modify the source code to customize the desired components and styles.
Build the modified UI Kit using npm run build.
Link the modified UI Kit to your project using npm link.

By forking the repository, you can easily merge updates from the main repository into your customized version.

Getting Updates

To get the latest updates from the Amity UI Kit open-source repository, you can pull the latest changes from the main repository into your forked repository. Here's how you can do it:

Add the main repository as a remote (if not already done):

git remote add upstream git@github.com:AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git

Fetch the latest changes from the main repository:
```
git fetch upstream
```
Merge the changes into your forked repository:
```
git merge upstream/main
```
Resolve any merge conflicts, if any.
Build the updated UI Kit:
```
npm run build
```
Link the updated UI Kit to your project:
```
npm link
```

By following these steps, you can keep your forked repository up to date with the latest changes from the main Amity UI Kit repository.

Last updated 1 month ago