Basic Setup

Installation Instructions

To integrate Replyke into your React application, start by installing the library.

npm install replyke

--- or ---

yarn add replyke

To integrate Replyke into your React Native application, install the React Native library instead.

npm install replyke-rn

--- or ---

yarn add replyke-rn

Implementation steps are the same for both React & React Native libraries.

Importing and Initializing Replyke

Social Style

The social style component is broken down into two main required components (CommentsFeed & NewCommentForm) and two optional components (SocialActionsBar & SortByButton), to allow for more flexible UI implementation. All four components need to be wrapped by the SocialContextProvider.

To implement, first import the Provider and all components from Replyke at the top of your React component file:

import {
  ReplykeSocialProvider,
  CommentsFeed,
  NewCommentForm,
  SocialActionsBar,
  SortByButton,
} from "replyke";

Then, place them as you wish. A basic implementation would look something like this (example uses Tailwind and Shadcn) :

<ReplykeSocialProvider
  apiBaseUrl="your-server-url"
  articleId="unique-article-id"
>
  <div className="flex p-6 items-center gap-1">
    <h4 className="font-semibold text-base flex-1">Comments</h4>
    <SortByButton
      priority="popular"
      activeView={
        <div className="bg-black py-1 px-2 rounded-md text-white text-xs">
          Popular
        </div>
      }
      nonActiveView={
        <div className="bg-gray-200 py-1 px-2 rounded-md text-xs">Popular</div>
      }
    />
    <SortByButton
      priority="newest"
      activeView={
        <div className="bg-black py-1 px-2 rounded-md text-white text-xs">
          Newest
        </div>
      }
      nonActiveView={
        <div className="bg-gray-200 py-1 px-2 rounded-md text-xs">Newest</div>
      }
    />
  </div>
  <div className="flex-1 flex flex-col overflow-hidden">
    <ScrollArea className="flex-1 px-4">
      <CommentsFeed />
      <div className="w-full h-4" />
    </ScrollArea>
    <div className="border-y p-4">
      <SocialActionsBar />
    </div>
    <div>
      <NewCommentForm />
    </div>
  </div>
</ReplykeSocialProvider>

Blog Style

Import the BlogCommentSection component from Replyke at the top of your React component file:

import { BlogCommentSection } from "replyke";

Then, implement the component in your application:

<BlogCommentSection apiBaseUrl="your-server-url" articleId="unique-article-id" />

Replace "unique-article-id" with a unique identifier for the article or content where you want to display comments.

This section sets the foundation for integrating Replyke's dynamic comment system into your application. Follow these steps to start enhancing user interaction on your platform.