useReplyke Hook

The useRepyke hook is designed for projects with premium access to fetch essential article data without unnecessary details such as comments or rendering components. This hook is ideal for obtaining data that can be used to build custom UI components tailored to specific needs.

To use the useRepyke hook in your project, ensure that you have premium access to the replyke package.

Usage

The useRepyke hook requires a configuration object and returns various values and components that can be used to interact with and display article data.

Configuration Object

The configuration object passed to useRepyke should include the following properties:

• accessKey: The project's unique premium access key.
• apiBaseUrl: The server base URL.
• articleId: The ID of the article to fetch data for.
• currentUser: The current user object containing _id, name, and img, or undefined if no user is logged in.

Returned Values

The hook returns an object with the following properties:

• userLikedArticle: A boolean that indicates whether the current user has liked the article (provided a user object is passed).
• commentCount: A number that represents the total number of comments on the article.
• likesCount: A number that represents the total number of likes on the article.
• likeArticle: A function that adds a like to the article from the current user (provided a user object is passed).
• unlikeArticle: A function that removes a like from the article by the current user (provided a user object is passed and they previously liked the article).
• topComment: An object containing details about the top comment on the article, including content, likes, author (with _id, name, and img), and createdAt (the time the comment was created).

Components

The hook also returns several customizable icon components:

• HeartButton: A heart icon component for liking/unliking the article.

  • Props:
    • iconSize: Size of the icon.
    • emptyColor: Color of the icon when the article is not liked.
    • fullColor: Color of the icon when the article is liked.

• CommentButton: A comment icon component.

  • Props:
    • iconSize: Size of the icon.
    • iconColor: Color of the icon.
    • onClick: Function to be called when the button is clicked.

• ShareButton: A share icon component.

  • Props:
    • iconSize: Size of the icon.
    • iconColor: Color of the icon.
    • onClick: Function to be called when the button is clicked.

• BookmarkButton: A bookmark icon component.

  • Props:
    • iconSize: Size of the icon.
    • iconColor: Color of the icon.
    • onClick: Function to be called when the button is clicked.

Example Usage

import { useRepyke } from "replyke";

const ArticleComponent = ({
  accessKey,
  apiBaseUrl,
  articleId,
  currentUser,
}) => {
  const {
    userLikedArticle,
    commentCount,
    likesCount,
    likeArticle,
    unlikeArticle,
    topComment,
    HeartButton,
    CommentButton,
    ShareButton,
    BookmarkButton,
  } = useRepyke({
    accessKey,
    apiBaseUrl,
    articleId,
    currentUser,
  });

  return (
    <div>
      <h1>Article Details</h1>
      <p>Likes: {likesCount}</p>
      <p>Comments: {commentCount}</p>
      <p>Top Comment: {topComment?.content}</p>

      <HeartButton
        iconSize="24px"
        emptyColor="gray"
        fullColor="red" />
      <CommentButton
        iconSize="24px"
        iconColor="blue"
        onClick={() => console.log("Comment clicked")}
      />
      <ShareButton
        iconSize="24px"
        iconColor="green"
        onClick={() => console.log("Share clicked")}
      />
      <BookmarkButton
        iconSize="24px"
        iconColor="orange"
        onClick={() => console.log("Bookmark clicked")}
      />
    </div>
  );
};

Notes

• Ensure that the accessKey provided is valid and has the necessary permissions.
• The hook does not fetch unnecessary data, focusing solely on essential article information.
• Custom icon components allow for flexible UI design tailored to the project's needs.