Skip to content

Using the Social feature

Emee Miano edited this page Mar 21, 2022 · 10 revisions

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.

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

Component customization limitation

Amity 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

Post

Comment

User

Follow/Unfollow

Clone this wiki locally