https://github.com/tecklens/shadcn-comments
shadcn-comments is a simple but multi-functional shadcn-react comment section component that helps you create comments section similar to github for your React App
https://github.com/tecklens/shadcn-comments
comments mdx mdxeditor reactjs shadcn-ui
Last synced: 3 months ago
JSON representation
shadcn-comments is a simple but multi-functional shadcn-react comment section component that helps you create comments section similar to github for your React App
- Host: GitHub
- URL: https://github.com/tecklens/shadcn-comments
- Owner: tecklens
- License: mit
- Created: 2024-09-11T15:13:02.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-11-25T01:18:13.000Z (6 months ago)
- Last Synced: 2025-02-02T06:24:27.122Z (3 months ago)
- Topics: comments, mdx, mdxeditor, reactjs, shadcn-ui
- Language: CSS
- Homepage: https://shadcn-comment.pages.dev/
- Size: 992 KB
- Stars: 9
- Watchers: 0
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Shadcn Comments
---
[Demo](https://shadcn-comment.pages.dev/)
## Install
Install the latest version!
```shell
npm i shadcn-comments
```
---
`shadcn-comments` is a simple but multi-functional shadcn-react comment section component that helps you create
comments section similar to github for your React App. `shadcn-comments` is very useful for react beginners
who want a comment section in their project but want to skip it's commplexity.
This library will give a fully functional comment section with the
following features:
- User can reply to comments
- User can edit his/her comments
- User can delete his/her comments
Live demo of the library: [here](#)
---
## Default Example
You can find the source code [here](#)
### Mobile
### Desktop (max-w-screen-md)
### Desktop editing (max-w-screen-md)
---
## Usage
Following is a basic example to start testing the library in your project. This library works on a user basis system and here are a few important points to remember:
| Props | Data Types | Default |
|--------------|-------------------------------|---------|
| theme | 'light' \| 'dark' \| 'system' | light |
| currentUser | [User](#types) | default |
| value | [Comment\[\]](#types) | [] |
| onChange | (comments: Comment[]) => void | |
| className | string | |
| allowUpVote | boolean | false |
| onVoteChange | (checked: boolean) => void | false |
```tsx
import {useState} from "react";
import {Terminal} from "lucide-react";
import {useTheme} from "./theme-provider.tsx";
import {Alert, AlertDescription, AlertTitle, Button, CommentSection, ACTIONS_TYPE} from 'shadcn-comments'
export default function DemoComment() {
const {theme, setTheme} = useTheme()
const [value, setValue] = useState([
{
user: {
id: '1',
userProfile: '',
fullName: 'victorcesae',
avatarUrl: ''
},
id: '2',
text: 'Another utility is to add text adornments, doing some simple typechecking so if a string is passed you can style a background, else render the react node.',
replies: [],
createdAt: new Date('2024-06-01'),
selectedActions: [ACTIONS_TYPE.UPVOTE, ACTIONS_TYPE.ROCKET, ACTIONS_TYPE.HEART],
actions: {
[ACTIONS_TYPE.UPVOTE]: 1,
[ACTIONS_TYPE.ROCKET]: 10,
[ACTIONS_TYPE.HEART]: 10,
}
},
{
user: {
id: '4',
userProfile: '',
fullName: 'UltimateGG',
avatarUrl: ''
},
id: '3',
text: 'Another utility is to add text adornments, doing some simple typechecking so if a string is passed you can style a background, else render the react node.',
replies: [{
user: {
id: '4',
userProfile: '',
fullName: 'UltimateGG',
avatarUrl: ''
},
id: '8',
text: 'Another utility is to add text adornments',
replies: [],
createdAt: new Date('2024-09-02')
}],
createdAt: new Date('2024-09-01')
}
])
const toggleDarkMode = () => {
setTheme(theme === 'light' ? 'dark' : 'light');
};
return (
Built using shadcn-comments
Toggle Dark Mode
Heads up!
You can add components and dependencies to your app using the cli.
{
setValue(val)
}}
className={''}
allowUpVote={true}
/>
)
}
```
---
### Types
```typescript
// User
export type User = {
id: string,
fullName: string,
userProfile?: string,
avatarUrl?: string,
}
```
```typescript
// Comment
export type Comment = {
user: User,
id: string,
parentId?: string;
text: string,
replies?: Comment[],
createdAt: Date;
}
```
---
## Change log
v1.0.3: add edit/delete/copy link/actions emoji for comment
---
## License
MIT © [dieptv1999](https://github.com/dieptv1999)