Skip to content

DOCS.md

Latest commit

 

History

History
373 lines (250 loc) · 15.6 KB

DOCS.md

File metadata and controls

373 lines (250 loc) · 15.6 KB

Circle Documentation

Pages

No Authentication

Page Path Component
Demo /demo Demo
Forget Password /forget-password ForgetPassword

Need Authentication

Page Path Component
404 * 404
Bookmarks /bookmarks Bookmarks
Calender Help /help/calender Calender
Contact Us /contact-us Contact Us
Discover Groups /groups/discover DiscoverGroups
Editor Help /help/editor Editor
Events /events Events
FriendsGroups /groups/friends FriendsGroups
Groups /groups Groups
Help /help Help
Homepage / Homepage
Join Us /join-us JoinUs
Massager /message Massager
Networks /networks Networks
Notification /notification Notification
Post Details /post/:postId PostDetails
Profile /profile/:profileId Profile
RecommendedGroups /groups/recommended RecommendedGroups
Results /results Results
Setting /setting Setting
Single Group /groups/:groupId SingleGroup
YourGroups /groups/your YourGroups

Components

Avatar

source

Props

Props Type Default Description
src String avatar specifies the source of the avatar image to the avatar wrapper
alt String avatar specifies the alt text for the avatar
sm Boolean false specifies whether or not to use a small image
className String '' specifies any custom classes to be added layout for the avatar image
status DefaultMantineColor null a string representing the color of the status indicator, or null if no status indicator should be displayed

Usage

import Avatar from './common/Avatar';

<Avatar sm />;
<Avatar src={avatar.png} alt='user-avatar' />;
<Avatar src={avatar.png} status={} />;

Badge

source

Props

Props Type Default Description
badge Badge null The badge object with properties for picture, label, message, and users.
className String '' An optional string for customizing the CSS class of the component.

Usage

import Badge from './common/Badge';

<Badge badge={badge} />;

Banner

source

Props

Props Type Default Description
title String title a string that sets the banner title
subtitle String subtitle a string that sets the banner subtitle
className String '' a string that allows for the addition of custom classes to the banner wrapper
icon String BiConfused a React component that sets the banner icon

Usage

import Banner from './common/Banner';

<Banner title='Profile' subtitle='Welcome to your account dashboard!' />;

CreatePost

source

Props

No Props Yet

Usage

import CreatePost from './common/CreatePost';

<CreatePost />;

EmojiPicker

source

Props

Props Type Default Description
onEmojiSelect Function (params: any) => void callback function that receives an object with information about the selected emoji.

Usage

import EmojiPicker from './common/EmojiPicker';

<EmojiPicker onEmojiSelect={} />;

Gallery

source

Props

Props Type Default Description
galleryId String just-gallery-id provide an ID for the gallery.
gallery String[] [] specify an array of image URLs.
full Boolean false determine if the gallery should be displayed in full mode.
id String uuidv4() pass and id to plr

Usage

import Gallery from './common/Gallery';

<Gallery gallery={[]} />;

Group

source

Props

Props Type Default Description
className String '' allows adding additional classes to the group card.
colView Boolean false determines whether the group card should be displayed in a column view or not.
group Group null object field that contains the group information

Usage

import Group from './common/Group';

<Group group={group} />;

// column View
<Group group={group} colView />;

InfoBanner

source

Props

Props Type Default Description
cover string '' string representing the URL of the cover image
avatar string '' string representing the URL of the avatar image
name string '' string representing the user's name
username string '' string representing the user's username
verified boolean '' boolean representing whether the user is verified or not
extraInfo ReactElement <></> JSX element representing any additional information to display in the banner
className string '' string representing additional CSS classes to apply to the banner

Usage

import InfoBanner from './common/InfoBanner';

<InfoBanner user={user} />;

PlyrViewer

source

Props

Props Type Default Description
src string '' specifies the source of the media to be played.
MediaType audio 'video' specifies the type of media to be played, either 'audio' or 'video'.
title string 'Plyr Title' specifies the title of the media to be played.

Usage

import PlyrViewer from './common/PlyrViewer';

<PlyrViewer src='audio.mp3' MediaType='audio' />;

<PlyrViewer src='video.mp3' MediaType='video' />;

Post

source

Props

Props Type Default Description
className String '' A string field that allows for additional CSS classes to be added to the post card wrapper.
post Post null The main field of the class, which is an object containing information about the post, including the user who posted, the post content, and the number of likes, comments, and shares.
isShared Boolean false A boolean field that specifies whether the post is a shared post or not. If true, the post footer is not displayed.

Usage

import Post from './common/Post';

<Post post={post} />;

<Post post={post} isShared />;

Skeleton

source

variant

  • Skeleton
  • Friend
  • Post
  • Badge
  • Comment

Props

Props Type Default Description
repeat number 1 number of Skeleton repetition
variant SkeletonVariant '' The 'Skeleton', 'Friend', 'Post', 'Badge', and 'Comment' components are defined within the function and are used as the different variants of the loading skeleton UI.

Usage

import Skeleton from './common/Skeleton';

<Skeleton variant='post' repeat={6} />;
<Skeleton variant='friend' repeat={6} />;
<Skeleton variant='badge' repeat={6} />;

Taps

source

Props

Props Type Default Description
taps SingleTap[] [] array of taps

Usage

import Taps from './common/Taps';

<Taps taps={TAPS} />;

TiptapEditor

source

Props

Props Type Default Description
noFontSizes Boolean false specifies if hide font size controller or not
content String '' the initial content of the editor
getText (content: { text: string; html: string }) => void (data: { text: string; html: string }) => console.log(data) callback function to retrieve the text content.

Usage

import TiptapEditor from './common/TiptapEditor';

<TiptapEditor content={initContent} />;

<TiptapEditor
  content={initContent}
  getText={(content: { text: string; html: string }) => {}}
/>;

User

source

Props

Props Type Default Description
user User null object that contains information about the user, such as their name, username, avatar, cover image, and badges.
className String '' a string that represents the CSS class name for the component.

Usage

import User from './common/User';

<User user={user} />;

Helpers

timeToX

source

Using day.js package to create timeToX helper function that return a value of readable format between passed date and now.

timeToX('1990-01-01'); //> "31 years ago"

millify

source

formateNumber

Converts long numbers into pretty, human-readable strings.

formateNumber(2000); //> 2K
formateNumber(2500); //> 2.5K

formateUnit

Converts long sizes into pretty, human-readable unit.

formateUnit(1440000); //> 1.44MB