Social ·

A collection of customizable, reusable social components for use with React.

Features

• Customizable Avatar Component: Display user avatars with a built-in default, allowing customization through a custom class, inclusion of user-specific information, and support for click events.
• BookmarkButton for Content Saving: Enable users to save or bookmark content with a customizable button appearance and functionality for handling bookmark click events.
• Interactive CommentButton: Enhance user engagement with comments through a button displaying comment counts, customizable appearance using a custom class, and click event handling.
• LikeButton with Icon Options: Express user approval with a customizable like button, offering options for heart or hand icons, along with customization of appearance, like counts, and click event handling.
• ShareButton for Content Sharing: Facilitate easy content sharing with a customizable share button, including appearance customization through a custom class and functionality for handling share click events.

Installation

Using npm.

npm install @sswahn/social

Usage

Import the components.

import {
  Avatar,
  BookmarkButton,
  CommentButton,
  LikeButton,
  ShareButton
} from '@sswahn/social'

Avatar

The Avatar component displays user avatars and has a built in default when no image is provided. Use an optional size prop for changing dimensions.

<Avatar
  className="custom-avatar"
  image="/path/to/user-avatar.jpg"
  username="JohnDoe"
  onClick={handleClick}
  size="50px"
/>

BookmarkButton

The BookmarkButton component represents a button that users can interact with to bookmark or save content.

<BookmarkButton
  className="custom-bookmark-btn"
  onClick={handleBookmarkClick}
/>

CommentButton

The CommentButton component is a button users can click to interact with comments. It displays the comment count and is customizable with a custom class.

<CommentButton
  className="custom-Comment-btn"
  count={0}
  onClick={handleCommentClick}
/>

LikeButton

The LikeButton has an optional choice of heart or hand icons, it defaults to hand. Handle click events to implement desired functionality.

<LikeButton
  className="custom-like-btn"
  icon={heart}
  count={0}
  onClick={handleLikeClick}
/>

ShareButton

The ShareButton component is a button users can click to share content.

<ShareButton
  className="custom-share-btn"
  onClick={handleShareClick}
/>

Peer Dependencies

Social requires React as a peer dependency. You should have React installed in your project with a version compatible with this library.

React: ^18.2.0

Credits

This library uses Font Awesome Icons.

• Font Awesome Icons: Font Awesome
  • Icons used under the Font Awesome Free License.

License

Social is MIT Licensed