Individual Components in Open Source for Web

Web
1

Hi, I’ve been trying to integrate the open source UI components for web so that I can include individual components in my existing app. I’ve managed to link using npm and can successfully bring through a few components such as ‘AmityUiKitFeed’ which displays just the feed.

I’ve noticed in the root index.js, several components and pages have been exported, including ‘AmityUiKitFeed’, so thought it would be just a case of exporting the other components from this page, rebuilding and relinking, but it doesn’t appear to work this way.

Could you please explain how to include other individual components, i.e. the post creator in my app. Thanks.

2

Hello @Mattheli our team is double checking on this, we will get back to you asap :pray:

3

Hi @Mattheli Please ensure that you have followed these steps below

  1. Add export { default as AmityPostCreator } from '~/social/components/post/Creator'; to src/index
  2. run npm run build, npm link in ui kit project
  3. run npm unlink @amityco/ui-kit-open-source , npm link @amityco/ui-kit-open-source --install-links in your project

and you should be able to include other components, please see the code below.

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

function App() {
  return (
    <div>
      <AmityUiKitProvider
        apiKey="..."
        apiRegion="..."
        userId="Web-Test"
        displayName="Web-Test"
      >
        <AmityPostCreator connected currentUserId="Web-Test" targetType={PostTargetType.GlobalFeed} />
      </AmityUiKitProvider>
    </div>
  );
}