All pages
Powered by GitBook
1 of 53

React (Deprecated)

Social Plus modules are ready-to-use — the only things left to do for our customers are integration and front-end. Going the extra mile, we've created a UI Kit with endless customizations.

Introduction

Our Social UIKit for Social Plus is a development kit with a user interface to enable fast integration of standard Social Plus features into new or existing applications. Themes allow you to apply your style through colors and fonts.

We have now open-sourced Social Plus UIKit so you will have complete control of the visual style of your Chat and Social application with endless customizations. Social Plus UIKit open source is now available in our GitHub repository.

To customize Social Plus UIKit open source, download the source code and apply the customizations in the forked source code. Once you fork our UIKit source code separately, you own the product so you are free to customize and build it for your specific use cases.

We recommend that you use Social Plus UIKit open source when:

  1. The standard UIKit does not apply to your use case.

  2. You want to use a Social Plus Chat or Social SDK feature which is not yet supported in our standard UIKit.

Please note that we will extend only limited support once you customize our UIKit open source since we won’t be able to fully know your code once you fork it.

Documentation

We are using the Social Plus UIKit open-source wiki for any documentation related to Social Plus UIKit open-source.

For our standard UIKit, you can refer to the documentation here.

Community Guidelines

If you would like to suggest improvements to the source code, you can submit a pull request. If you find bugs or would like to request features, you can create an issue. Please note that not all changes and requests will be approved but they will be assessed in due course.

For more information on these guidelines, you may refer to the Social Plus UIKit open-source wiki or you may go directly to these related pages:

  • Customizing Social Plus UIKit Open Source

  • Contributing to Social Plus UIKit Open Source

  • Submitting fixes and feature requests

Benefits

  • Easy Installation.

  • Fully featured social experience with a minimal amount of code.

  • Customize targeted UX flows, and specific views and respond to user interactions to tailor a user experience for just your application.

Overview

Requirements

  • React 16+

  • React hooks

Key Concepts

Architecture

The UIKit is built on the foundation of the Social Plus API. We added a UI layer to speed up the product development efforts of your application. At the core, it is leveraging the same Channel and messaging concepts, subscribing to live objects while adding a UIKit to accelerate product delivery and UI that delivers great user experience for companies wanting to deploy messaging and other functionalities.

In the current state, our Social module can be used. This module can be integrated into your application with ease using this documentation.

Module

Description

​Community (Group) Module​

A feature for Social media where you can create community, post content, and see new content generated via Feed.

Web UIKit Installation Guide

Social Plus Web UIKit Installation Guide.

To allow for more customization, we have now open-sourced our UI Kits and deprecated the packaged UI Kit version that was previously available.

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 development experience.

To ensure that you continue to receive the latest features and updates, we encourage you to migrate over to the open-source version. This guide will help you:

  • Migrate Web Open Source UI Kit with an existing project

  • Modify the Open Source UI Kit to customize the visual style

  • Get the latest Open Source UI Kit updates

Migrate Web Open Source UI Kit with Existing Project

Remove Existing Dependencies

If you’ve never used the packaged Web UI Kit before, you may skip this step and proceed to the next step.

If you’re migrating over to the open-source version, you’ll need to remove and unlink the packaged UI Kit from your project before installing the open-source source code.

Migrate Open Source Web UI Kit

There are several ways for you to integrate the open-source Web UI Kit into your projects, depending on your workflow. We recommend installing from npm, however, we’ve also included instructions to install via Git Submodule.

Method 1: Installing via npm

  • Clone or download source code from an open-source GitHub repository

git clone git@github.com:AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git
  • After downloading the source code, navigate to the directory where the source code was installed:

cd Amity-Social-Cloud-UIKit-Web-OpenSource
  • Run npm i to install package dependencies

  • Run npm build

  • Run npm link

  • Lastly, import (link) the UI Kit into your project by running the following command

npm link @amityco/ui-kit-open-source --install-links

Woohoo! All set! Now let’s try a sample code to get you started with our UI Kit:

import "./styles.css";
import { AmityUiKitProvider, AmityUiKitSocial } from "@amityco/ui-kit-open-source";
const userId = "<your USER ID here>";
const apiKey = "<your API key here>";
export default function App() {
return (
<div className="App">
<AmityUiKitProvider
key={userId}
apiKey={apiKey}
userId={userId}
displayName={userId}
>
<AmityUiKitSocial />
</AmityUiKitProvider>
</div>
);
}

Method 2: Installing via git submodule

  • First, create a new React project.

  • Create a new repository using git init inside your root directory.

  • Select the path where you want to clone the submodule or use cd src.

  • Add Social Plus UIKit open source into your git repository with the git submodule command as shown below.

git submodule add
 https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource
 "ui-kit"
  • Navigate to the directory where the source code was installed.

cd ui-kit
  • Run npm i to install package dependencies.

  • Run npm run build.

  • Next, go back to your project’s root directory and run the following commands:

    • cd node_modules/react

    • npm link

  • Then, go to the ui-kit folder and run npm link react.

  • Finally, go back to the root directory of your project and run npm run start.

If you receive warnings about “eslint” (which may happen to some versions of create-react-app if your project was created using this tool), please follow the steps below:

1) Inside ui-kit dir open package.json, move all eslint dependencies into "peerDependencies" field

2) Remove package-lock.json and run "npm i” again

3) Link react from root to ui-kit again

Woohoo! All set! Now let’s try a sample code to get you started with our UI Kit

import "./styles.css";
import { AmityUiKitProvider, AmityUiKitSocial } from "@amityco/ui-kit-open-source";
const userId = "<your USER ID here>";
const apiKey = "<your API key here>";
export default function App() {
return (
<div className="App">
<AmityUiKitProvider
key={userId}
apiKey={apiKey}
userId={userId}
displayName={userId}
>
<AmityUiKitSocial />
</AmityUiKitProvider>
</div>
);
}

Modifying Web Open Source UI Kit

You can modify the Web open-source UI Kit to customize behaviors to fit your needs. To modify the code, simply copy and paste it into your local machine.

We recommend that you first fork the repository before starting any customization work, so that it will be easier to merge the code with the next version update that we provide from the main repository.

Reference on forking: https://docs.github.com/en/get-started/quickstart/fork-a-repo

Get Latest UI Kit Open Source Updates

To update to the latest version of the UI Kit, you can pull the latest commit of the git submodule.

git clone git@github.com:AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git
cd ..
npm i
npm build
npm link

Installing UI Kit (deprecated)

To provide greater customization options, we have open-sourced our UIKit and deprecated the packaged UIKit version previously available. For the best quality and access to the latest features, we strongly recommend integrating our UIKit with the open-source version. For more details, please refer to the Web UIKit Installation Guide section.

The UiKitProvider

At the core of your project, you will need to import and decorate your application with the UiKitProvider.

import { UiKitProvider } from ‘@amityco/ui-kit’

export default function App() {
  return <UiKitProvider>
    <YourApp />
  </UiKitProvider>
}

Social Plus UIKit already includes our SDK. Don’t install Social Plus SDK separately if you have already installed the UIKit.

Using the UIKit

You can use the UIKit components with this code:

<AmityUiKitProvider key={userId} apiKey={apiKey} userId={userId}>
    <AmityUiKitSocial />
</AmityUiKitProvider>

Check this sample code in our web sample application.

Setup & Authentication

Setup API Key

AmityUIKitProvider requires an API key. You need a valid API key to begin using the UIKit. Please find your account API key in the Social Plus Console.

After logging in Console:

  1. Click Settings to expand the menu.

  2. Select Security.

  3. On the Security page, you can find the API key in the Keys section.

API key in Security page
export default function Wrapper({ apiKey, apiEndpoint, userId, displayName }) => {
    const getAuthToken = async () => {
      const authToken = await getAuthTokenFromApi()
      return authToken;
    }
  
    return (
      <AmityUiKitProvider
        ref={ref}
        apiKey={apiKey}
        apiEndpoint={apiEndpoint}
        userId={userId}
        displayName={displayName || userId}
        onConnected={handleConnected}
        onDisconnected={handleDisconnected}
        getAuthToken={getAuthToken}
      >
        <App
           connect={handleConnect}
           disconnect={handleDisconnect} />
      </AmityUiKitProvider>
    )
  }

AmityUIKitProvider should be placed only once at the top of your application. Having multiple providers will create connection problems.

Note: We currently do not support React's Strict Mode. Please make sure that Strict Mode is disabled when integrating AmityUIKitProvider in your application.

Specify Endpoints Manually (Optional)

You can specify endpoints manually via optional parameters. API endpoints for each data center are different so you need to adjust the endpoint accordingly.

We currently support multi-data center capabilities for the following regions:

Region

Endpoint

Endpoint URL

Europe

ApiEndpoint.EU

api.eu.amity.co

Singapore

ApiEndpoint.SG

api.sg.amity.co

United States

ApiEndpoint.US

api.us.amity.co

Unregister

If your user logs out, you should explicitly unregister the user from the SDK as well, to prevent the current device from receiving any unnecessary or restricted data.

export default function Wrapper({ apiKey, apiEndpoint, userId, displayName }) => {
  const ref = useRef();

  const handleConnect = () => ref.current.connect();
  const handleDisconnect = () => ref.current.disconnect();

  const handleConnected = () => console.log(“connected”);
  const handleDisconnected = () => console.log(“disconnected”);

  return (
    <AmityUiKitProvider
      ref={ref}
      apiKey={apiKey}
      apiEndpoint={apiEndpoint}
      userId={userId}
      displayName={displayName || userId}
      onConnected={handleConnected}
      onDisconnected={handleDisconnected}
    >
      <App
         connect={handleConnect}
         disconnect={handleDisconnect} />
    </AmityUiKitProvider>
  )
}

Using Themes

Using the default theme

Social Plus UIKit uses the default theme as part of the design language.

Theme customization

Without customization, the UIKit already looks good. However, if you wish to customize the theme, you can declare changes to both colors and typography. The tables below shows the default theme values.

Colors

UIKit uses a small set of declared colors to simplify the design task for developers. These colours are automatically rendered at appropriate shades to communicate states and interactions to the users.

Color

Description

Default

Primary

Used for buttons and primary call to actions

#1054DE

Secondary

Used in secondary UI elements

#292B32

Alert

Used when informing users of errors or information that requires an attention.

#FA4D30

Highlight

Used for hyperlink text

#1054DE

Base

Text presented on light background

#292B32

Tertiary

Used in tertiary UI elements

#FF305A

Neutral

Used in supporting text

#17181C

Borders

Used in borders

#EBECEF

Background

Used in background

#FFFFFF

Typography

Section

Weight/Family

Style/Size

Global

Inter, apple-system, BlinkMacSystemFont, Arial, sans-serif

normal

Headline

600

20 px

Title

600

16 px

Body

normal

14 px

Body bold

600

14 px

Caption

normal

12 px

Caption bold

600

12 px

This is what the structure looks like if you are just using the default theme.

const defaultTheme = {
  palette: {
    alert: '#FA4D30',
    base: '#292B32',
    primary: '#1054DE',
    secondary: '#FFD400',
    tertiary: '#FF305A',
    neutral: '#17181C',
    highlight: '#1054DE',

    system: {
      borders: '#ebecef',
      background: '#fff',
    },
  },

  typography: {
    global: {
      fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, Arial, sans-serif',
      fontStyle: 'normal',
    },
    headline: {
      fontWeight: 600,
      fontSize: '20px',
    },
    title: {
      fontWeight: 600,
      fontSize: '16px',
    },
    body: {
      fontWeight: 'normal',
      fontSize: '14px',
    },
    bodyBold: {
      fontWeight: 600,
      fontSize: '14px',
    },
    caption: {
      fontWeight: 'normal',
      fontSize: '12px',
    },
    captionBold: {
      fontWeight: 600,
      fontSize: '12px',
    },
  },
};

To customize your own theme:

const myTheme = {
  //...partial representation of the defaultTheme
}

<AmityUiKitProvider theme={myTheme} ... />

A custom theme will be applied on top of the default theme so you don't need to provide all the values. The default values will be used if some customizations are missing.

Social UIKit

Our community group functionality within UIKit allows you to explore social features and see how they will look in your app.

Using as a whole feature with the default settings

This is the quickest way to start using the Community feature. All the default logic and navigations have already been defined.

Web Social UIKit

Usage

First, you need to get your api key and authToken from the authorization server. Then, to render the whole social kit:

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

function MyApp() {
  return (
    <AmityUiKitProvider
      apiKey={...}
      authToken={...}
      userId="myUserId"
      displayName="myUserName"
    >
      <AmityUiKitSocial />
    </AmityUiKitProvider>
  );
}

To render the user feed only:

import { PostTargetType } from '@amityco/js-sdk'
import { AmityUiKitProvider, AmityUiKitFeed } from '@amityco/ui-kit';

function UserFeedPage({ user, isMe }) {
  return (
    <AmityUiKitProvider
  	apiKey={...}
  	authToken={...}
  	userId="myUserId"
  	displayName="myUserName"
    >
  	<AmityUiKitFeed
        targetType={isMe ? PostTargetType.MyFeed : PostTargetType.UserFeed}
        targetId={user.userId}
        showPostCreator={isMe}
      />
    </AmityUiKitProvider>
  );
}

Our Components

There are many components that you can use and integrate into your existing application.

Component Customization Limitation

Social Plus UIKit provides already built UI elements on a single page. You can change the appearance such as color and typography in the global settings. However, the UIKit does not allow you to replace these small components with other views. In addition, you cannot modify the view hierarchy inside the page.

Community Home Page

Show community feeds, search, or create new communities.

Community

The community section consists of three components:

  • Search communities

  • NewsFeed

  • Explore

Search Communities

Easily search for communities by providing the community name.

Features

Feature

Description

Search communities

Input the name of the community you want to search. Clicking the community from the returned list will take you to the community's profile page.

Newsfeed

View feeds from communities as well as member.

Community newsfeed

The Community Newsfeed consists of:

  • Global Feed

Global Feed

View feeds from communities as well as member.

Community global feed

Features

Feature

Description

Global feed

Scroll vertically to see a list of posts in your global feed.

Custom post ranking

The posts will be ranked according to a score-sorting mechanism.

Refer to Custom Post Ranking for more information about this feature.

Explore

Explore recommended and trending communities

Explore communities

This page consists of three components:

  • Recommended communities

  • Top trending communities

  • Categories

Recommended Communities

This section shows a list of recommended communities.

List of recommended communities

Features

Feature

Description

Recommended

Community list

A visual list of communities with the highest member count. The communities in the list are those where you are not a member yet.

Navigation to Community profile

Select a community to go to its Community Profile page.

Top Trending Communities

A list of the latest top trending communities.

Today's top trending communities

Features

Feature

Description

Top trending

Community list

Visual list of communities with the highest number of members. It can be a combination of communities where you may or may not be a member of.

Navigation to Community profile

Select a community to go to its Community Profile page.

Categories

This section shows a list of community categories in alphabetical order.

Community categories

Features

Feature

Description

Category list

You can see categories sorted in alphabetical order. Clicking the < > navigation buttons will let you explore the entire categories list.

Navigation to Community list by category

Select a category to see all the communities listed under the selected category.

My Community

This section shows a preview of the communities that you are a member.

Features

Feature

Description

My Community list

Scroll vertically to see a list of communities that you joined sorted in alphabetical order.

Navigation to Community profile page

Select a community to go to the community's profile page.

Community creation

Click Create Community and the Create community pop-up will show so you can input the details of the community that you will create.

Community List By Category Page

This page shows a list of all communities that belong to a category sorted in alphabetical order.

Communities under Sports category

Features

Feature

Description

Community list by category

List of all communities that belong to the selected category sorted in alphabetical order.

Navigation to Community Profile page

Select a community to go to the Community Profile page.

Community Creation Page

This page provides a form for community creation.

Default state of community creation page

Feature and Component

Feature
Description

Community creation

Create a community by providing information in the required fields. Click Create to submit.

Community Settings

This page provides option managing the community settings.

Community settings

Community settings can be accessed by clicking the Edit profile button in the Community profile page.

Features

Feature

Description

Edit profile page

Access to the Community Profile Edit page

Community Members page

Access to the Community member page

Permissions page

Access to the Permissions page

Navigation to Community Profile

Navigates back to the community profile page

Note:

Please note that navigating back does not automatically save changes. You must manually save your edits using the Save button.

Edit Profile Page

This page provides a form for community profile update.

Edit profile page

Features

Feature

Description

Community profile update

Update community information such as avatar, community name, description, category, and permission. The community's profile will be updated after clicking the Save button.

Closing community

Click Close to close the community. When you close the community, the community page and all its content will be removed.

Members

Features

Feature
Description

Members list

List of all the members of the community. You can perform the following actions on each member: 1. Report user 2. Promote to moderator 3. Remove from community

Moderators list

List of all the community moderators. You can perform the following actions on each moderator: 1. Report user 2. Dismiss moderator 3. Remove from community

Add Members

Add members to the community

Permissions

Feature

Feature
Description

Post review list

List of posts from community members that the moderator needs to approve.

Post Creation

This section provides a form for post creation.

Default post creation stage

Features

Feature

Description

Post creation

Create post by adding content such as text, image, file, and video.

Mention users in post

Mention users in a post by typing @ to activate the mention suggestion and selecting their name in the suggestion list. You can mention up to 30 users per post.

An alert will be shown if character count is greater than 50000 or mentions count is greater than 30.

Types of Posts

1. Text

2. Text and Image

Creating a text and image post

Creating a text and image post

After posting a text and image post

After posting a text and image post

3. Text and File

Creating a text and file post

Creating a text and file post

After posting a text and file post

After posting a text and file post

4. Text and Video

Creating a text and video post

Creating a text and video post

After posting a text and video post

After posting a text and video post

5. Poll Post

Default poll creation page

Default poll creation page

Poll post

Poll post

Poll voting

Poll voting

Mention users in a poll post

Mention users in a poll post

5. Livestream Post

You can create a live stream post in the console.

You cannot create a live stream post via Web UIKit but you can view live stream videos using Web UIKit's live stream viewer. Refer to our Live Stream post documentation for details on how to view a live stream post.

Mention users in a livestream post

Mention users in a livestream post

Livestream Post

See community interaction as it happens.

Out Web UIKit provides the livestream recording feature that allows you to record livestreams and broadcast simultaneously in real-time. You can also play historical streams when the livestream ends.

This section describes the livestream viewing feature in detail. Refer to our Livestream documentation to create a livestream in console.

A livestream post can be viewed in the following feeds:

  • Community feed

  • User feed

  • Global feed

  • Content feed

You will be able to see the livestream post and interact with it as soon as the livestreamer starts streaming.

Creating a Livestream Post

Creating a livestream can be done in Console. There are two parts before you can create the livestream post. First, create the livestream. You need to have a third-party software installed such as OBS or any livestreaming tool. Then, create the post.

Create livestream

  1. In Console, go to Livestream menu.

  2. In Streaming management page, click .

  3. In Create new stream pop-up, provide the title, description, and thumbnail.

  4. Click OK to submit.

  5. In Streaming management list, select the stream that you created.

  6. In Streaming details page, copy the Server URL. Paste it in your livestreaming software and start the livestream.

Create livestream post

  1. In Console, go to Posts menu.

  2. In Post Management page, click and select Livestream Post in the dropdown selection.

  3. In Create livestream post pop-up, provide the Target type, Target ID, and Stream ID.

    • Target type - can be Content, Community, or User

    • Target ID - community ID or user ID of the community or User where you want to post the livestream

    • Stream ID - search for the streamId value in the stream's Raw model in Streaming details

  4. Click OK to submit.

Viewing a livestream post

Live

Other viewers can watch your livestreaming while you are simultaneously recording it. They will see a LIVE indicator on the video.

Tapping the play button in the livestream post will play the video in a full screen mode.

Livestream in feed

The LIVE indicator on the upper left corner of the video indicates that the video is currently streaming while you are watching it.

Livestream ended

After ending your livestreaming, the playback video may not be available instantly for viewers to see while it is still in the process of producing the playback video. The viewers will see a message that the playback will be available for watching shortly.

Playback

When the playback video is already available for viewing, a RECORDED indicator is shown on the video post.

Video playback with cover (left) and with a default cover (right)

Idle state

The livestream may be in idle state. This happens when you delete the livestream in console or or other issues that will not enable the livestreaming to start. The viewer will see a message that the stream is currently unavailable.

Read-only mode

A livestream post will have the same privacy and access controls as with the other posts. This means that users without the permission, such as those who are not members of the community, won’t be able to view the livestreaming/playback video in a private community. If the community is public, non-members can view the post as read only so they won't be able to interact with it.

Post Edit

This page provides a form to edit post content.

Features

Feature

Description

Text editing

Allows you to edit the post

Image removal

Allows you to remove images from the post

File removal

Allows you to remove files from the post

Limitation:

Images and files can only be removed from a post. New images or files cannot be added.

Edit Post Pop-up

Comments

Commenting on a post
Clicking Read more will show the entire comment
Mention users in a comment

Features

Description

Comment creation

Create comment by adding desired text in the compose bar and clicking Add comment.

Mention in comment

Mention users in comment by typing @ to activate mention suggestion and selecting their names in the suggestion list. Up to 30 users can be mentioned per post.

An alert will be shown if character count is greater than 50000 or mentions count is greater than 30.

Edit comment

Edit comment by clicking ... and selecting Edit comment from the pop-up. Click Save to submit changes.

Delete comment

Delete the comment by clicking ... and selecting Delete comment from the pop-up. Click Delete in the Delete comment confirmation message to confirm deletion. Otherwise, press Cancel.

Community Profile Page

This page shows the profile of a community including its own feed.

Components

  • Community feed

  • Media Gallery

  • Community Members

Below are the different views of the community profile page depending on your role and permission.

Moderator views

Moderator view
Wtih pending posts that need the moderator's approval

Non-community members

Non-member view of community profile page

Features

Feature

Description

Becoming a member

Click Join to join a community

Post creation

Click Post to create a post

Community profile update

Edit community profile

Community Settings

Edit community settings

Transfer moderator role

Promote a community member to a moderator

Leave Community

Click to leave the community. If you are the last remaining moderator in the community you need to transfer your moderator role to other members.

Community Feed

This section shows a list of posts from a community.

Community feed

Features

Feature

Data Type

Description

targetType

enum

for community feed it should be PostTargetType.CommunityFeed

feedType

enum

possible values FeedType.Published, FeedType.Declined, FeedType.Reviewing

targetId

string

for community feed it should be <communityId>

className

string

custom style classes to be applied to feed

showPostCreator

boolean

show creator of the post

readonly

boolean

make feed readonly

import { FeedType, PostTargetType } from '@amityco/js-sdk'

const CommunityFeed = ({ communityId, currentUserId, isNewCommunity }) => {
return (
            <AmityUiKitFeed
                        targetType={PostTargetType.CommunityFeed}
                        targetId={communityId}
                        feedType={FeedType.Published}
            />
    )
}

Media Gallery

This component shows a collection of images and videos posted in the community feed.

Gallery filtered to show photos only
Gallery filtered to show videos only

Features

Feature

Description

Gallery

Scroll vertically to see images and videos from posts in a community feed.

Media Filter

Filters according to media type (Photos and Videos). Click the corresponding tabs to see the filtered posts.

Community Members Page

Gallery filtered to show photos only

Features

Feature

Description

Members list

List of community members. You can perform the following actions for each member: 1. Report user 2. Promote to moderator 3. Remove from community

Moderators list

List of community moderators

Navigation to user profile page

View user's profile by selecting the member from the list

Transfer Moderator Role

This feature allows the transfer of moderator roles and blocks the last moderator to leave a community without transferring the role to other members, giving continuity to groups and creating a clear assignment to future moderators.

How it works

When a moderator leaves the community and there are no other moderators left, a pop-up will show that the moderator needs to nominate other members before leaving the community.

The moderator needs to promote a member to a moderator to transfer the moderator role to that member.

After a new moderator is selected, the moderator who wishes to leave can now leave the community.

User Profile

This page shows user profile information as well as user feed.

There are two types of user profiles:

  1. Your own profile

My profile
  1. Profile of another user

Profile of another user

Components

  • User feed

Features

Feature

Description

User Profile

View user display name and description

Post creation

Click Post to create a post on your timeline

User profile Edit

Click Edit profile to open User profile edit page and update your profile

User Feed

This section shows the user feed of a specific user.

Default User Feed

This view allows you to see and interact with the feed content normally. This applies when the Privacy setting is Public.

Private user feed

This view blocks any user to see the target user's feed content. This view only exists if the Privacy setting is Private.

Features

Feature

Description

User feed

Scroll vertically to see a list of posts from a user's feed

Private feed

You cannot see the feed of a user whose privacy setting is private and you're not connected to.

Media Gallery

This component shows a collection of images and videos posted in the user feed.

Features

Feature
Description

Gallery

Scroll vertically to see images and videos from posts in a user feed

Media Filter

Filters according to media type (Photos and Videos). Click the corresponding tabs to see the filtered posts.

Following / Follower User List Page

In the Followings page you can see the list of users you are following.

List of users you are following

In the Followers page you can see the list of users who follow you.

List of users who follow you

Feature

Description

Report/undo report user

Report/undo reporting of a user

Remove user from follower list

Remove a user from your Following list

Redirect user to user profile page

Click a user in the list to go to the user's profile page

Follow Request Page

In this section, you can see all your pending follow requests. You can either Accept or Decline a request.

Follow requests list

If a user in your pending list has withdrawn the request, the system error below will show when you accept or decline the user's follow request.

Features

Feature

Description

Accept Follow request

If you accept another user's follow request, the system will create a relationship and the user will be removed from your pending list.

Decline Follow request

If you decline another user's follow request, the system will invalidate the request and the user will be removed from your pending list.

When a user withdraws a follow request, that user will not be automatically removed from your pending list. You need to accept/decline the request first.

Profile Settings Page

This section allows you to edit your own profile information.

Manage your profile settings on this Profile Settings page.

Edit Profile

Feature

Feature

Description

User profile update

Update your profile information such as avatar, display name, and description. Profile will be updated upon clicking Save.

Edit profile page

Using Your Own Component

Social Plus UIKit will allow some parts of the component to be replaceable with your own component.

UIKit provides a way to use your own UI to replace the default UIKit components.

Feature

  • Using your own like button for posts

Using Your Own Like Button for Posts

Like icon

Usage

You need to pass all your custom components into AmityUiKitProvider using customComponents prop.

import { AmityUiKitProvider } from '@amityco/ui-kit';

function CustomPostLikeButton({ onClick, isActive, isDisabled }) {
  return (...);
}

function MyApp() {
  return (
    <AmityUiKitProvider
      customComponents={{
        PostLikeButton: (props) => <CustomPostLikeButton {...props} />,
        anotherComponentId: (props) => <AnotherCustomComponent {...props} />,
      }}
    >
    </AmityUiKitProvider>
  );
}

Overriding UIKit Behaviour

UIKIT allows the default behaviour to be overridden by custom logic.

UIKit provides a way to render your own UI and override the default UIKit behavior.

Feature

  • Post rendering

Post Rendering

Custom Post Rendering

UIKit provides default renderers for the core data types: text, image, and file. It also provides a way to render your own UI for your custom post.

Post Structure

A single post UI is composed of 1 or more blocks. This allows reusability of block components such as header or footer which can be shared by different kinds of posts.

Text post structure

This is an example of an image post which contains three tableview cells. Top cell represents the header, middle cell contains content and bottom cell is footer cell.

For now, we only export footer from UIKit - AmityPostEngagementBar.

Creating UI for custom posts

First, you need to create your custom renderer.

import { AmityPostContainer, AmityPostEngagementBar } from '@amityco/ui-kit';

function CustomPostRenderer({ className, post }) {
  return (
    <AmityPostContainer className={className}>
      ...

      <AmityPostEngagementBar postId={post.postId} />
    </AmityPostContainer>
  );
}

Then, you need to pass your renderer into AmityUiKitProvider

function MyApp() {
  return (
    <AmityUiKitProvider
      postRenderers={{
        customPostDataType: (props) => <CustomPostRenderer {...props} />,
        image: (props) => <CustomImagePostRenderer {...props} />,
      }}
    >
      ...
    </AmityUiKitProvider>
  );
}

Chat UIKit

Our chat functionality within the UIKit will allow you to explore how to best integrate and design messaging features and visually see how they will look in your app.

Web Chat UIKit is currently under Beta version so many functionalities are still under development. We will update the relevant sections accordingly as we progress.

Using as a Whole Feature with the Default Settings

This is the quickest way to start using the Chat feature, all the default logic and navigations have already been defined.

Our Components

Recent Chat

This page shows a list of the most recent chats.

Features

Feature

Description

Recent chat list

List of the most recent chat

Navigation to Message list

Selecting a chat will show the message thread in the chatroom ​

Chat Room

This page shows a list of the most recent chats.

Message list page header

Features

Feature

Description

Community avatar

If the community has no avatar, the system will show the default avatar.

Community display name

If the community has no display name, the display name will be 'anonymous'.

Member count

Shows how many members the community has

Message list

Feature

Feature

Description

Conversation thread

Latest messages will be at the bottom of the screen. Scroll up to see all messages.

Compose Message

Features

Feature

Description

Send Image

Allows you to send an image message.

Note:This is currently not supported yet.

Send file

Allows you to attach a file in the message.

Note:This is currently not supported yet.

Compose bar

You can compose the message that you want to send here.

Send

Button for sending your message.

Note: Pressing Enter will also send the message.

Message Bubble

Text Message Bubble

Features

Feature

Description

Flag/Unlfag message

You can only flag or unflag received messages. Click the three vertical dots at the bottom right of the bubble and select flag or unflag.

Edit edit

You can only edit the messages you sent. Click the three vertical dots at the bottom right of the bubble and select edit.

Delete

Click the three vertical dots at the bottom right and select delete to delete the message.

Sent time stamp

Shows the time stamp in HH:MM AM/PM format.

Deleted message

If the message is deleted, the deleted label will be shown.

Chat Details

Features

Feature

Description

Community avatar

If the community has no avatar, the system will show the default avatar.

Community display name

If the community has no display name, the display name will be 'anonymous'.

Event Handling

Custom Event Handler

There are many pages and actions on Social Plus UIKit. Pages can be nested inside others and it would be hard to override events on the nested pages. In order to solve this problem, we provide EkoEventHandler which is a behavior controller for actions that happen in UIKit.

Supported Events

Event

Parameter

Condition

onChangePage

pageName

onChangePage is called right before UIKit changes the page type which should be rendered. If handler is passed, UIKit relies on it instead of its internal implementation

onClickCategory

categoryId

Category display name is clicked

onClickCommunity

communityId

Community display name is clicked

onClickUser

userId

User avatar or user display name is clicked

onCommunityCreated

communityId

New community is created

onEditCommunity

communityId

Edit community button is clicked

onEditUser

userId

Edit user button is clicked

Usage

To pass handlers into UIKit you need to set the ‘actionHandlers’ prop for AmityUiKitProvider. All handlers are optional. If any is not passed, UIKit will use its own internal implementation.

import { AmityUiKitProvider } from '@amityco/ui-kit';

function MyApp() {
  return (
    <AmityUiKitProvider
      actionHandlers={{
        onChangePage: customOnChangePageHandler,
        onClickCategory: customOnClickCategoryHandler,
        onClickCommunity: customOnClickCommunityHandler,
        onClickUser: customOnClickUserHandler,
        onCommunityCreated: customOnCommunityCreatedHandler,
        onEditCommunity: customOnEditCommunityHandler,
        onEditUser: customOnEditUserHandler,
      }}
    >
       ...
    </AmityUiKitProvider>
  );
}

You can access any action handler using the useAmityNavigationhook.

import { useAmityNavigation } from '@amityco/ui-kit';

function MyComponent() {
  const { onClickUser } = useAmityNavigation();

  return (
    <button onClick={() => onClickUser('myUser')}>
       Show My User page
    </button>
  )
}

Example

When a user clicks on the user profile avatar at the post creator area, UIKit will open User profile page.

However, you can intercept the event and define your own logic following the example below.

Usage

Let’s say you want to override the default logic and open your own modal showing the user profile instead of navigating to the user profile page.

function openUserProfileModal(userId) {
  ...
}

function MyApp() {
  return (
    <AmityUiKitProvider
      actionHandlers={{
        onClickUser: userId => openUserProfileModal(userId),
      }}
    >
      ...
    </AmityUiKitProvider>
  );
}

Roles & Permissions

As of v1.8, UIKit offers you the possibility to manage roles and permissions via integration with SDK.

UIKit offers you a ready-to-use integration solution with the SDK Role & Permission feature. There is a default Community level role named Moderator.

Permissions

Description

Add user

Moderator user can add new members to the community.

Remove user

Moderator user can remove members from the community.

Assign Moderator role to other users

Moderator user can assign Moderator role to another member in the same community.

Remove Moderator role from a Moderator user

Moderator user can remove Moderator role from another Moderator in the same community.

Edit community

Moderator user can rename community, change community type as he see fit.

Close community

Moderator user can close the community.

Moderator badge

the "Moderator" badge shown on the post indicates it was created by a moderator user.