{"id":19413253,"url":"https://github.com/malerba118/supabase-comments-extension","last_synced_at":"2025-04-24T12:31:31.865Z","repository":{"id":44586437,"uuid":"447821431","full_name":"malerba118/supabase-comments-extension","owner":"malerba118","description":"A comment system built on supabase","archived":false,"fork":false,"pushed_at":"2022-10-18T23:14:40.000Z","size":13685,"stargazers_count":87,"open_issues_count":6,"forks_count":13,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-28T03:26:54.995Z","etag":null,"topics":["comment-system","react","reactjs","supabase"],"latest_commit_sha":null,"homepage":"https://malerba118.github.io/supabase-comments-extension","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/malerba118.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-14T02:44:59.000Z","updated_at":"2024-04-26T05:46:57.000Z","dependencies_parsed_at":"2022-08-26T02:02:48.303Z","dependency_job_id":null,"html_url":"https://github.com/malerba118/supabase-comments-extension","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malerba118%2Fsupabase-comments-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malerba118%2Fsupabase-comments-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malerba118%2Fsupabase-comments-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malerba118%2Fsupabase-comments-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/malerba118","download_url":"https://codeload.github.com/malerba118/supabase-comments-extension/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223952779,"owners_count":17230947,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["comment-system","react","reactjs","supabase"],"created_at":"2024-11-10T12:31:52.753Z","updated_at":"2024-11-10T12:31:52.819Z","avatar_url":"https://github.com/malerba118.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Supabase Comments Extension\n\nAdd a robust comment system to your react app in ~10 minutes!\n\nThis library provides comments, replies, reactions, mentions, and authentication all out of the box.\n\n## Demos\n\n\u003c!-- Choose your flavor: --\u003e\n  - https://malerba118.github.io/supabase-comments-extension\n  - https://codesandbox.io/s/supabase-comments-extension-demo-8hg9s?file=/src/App.tsx\n\n## Getting Started\n\n\nFirst things first, this project is powered by [supabase](https://supabase.com/) so if you don't already have a supabase db, [head over there and make one](https://app.supabase.io/) (it's super simple and literally takes a few seconds)\n\n### Installation\n\nInstall this package and its peer dependencies\n\n```bash\nnpm install --save supabase-comments-extension @supabase/ui @supabase/supabase-js react-query\n```\n\n### Running Migrations \n\nOnce you've got yourself a supabase db, you'll need to add a few tables and other sql goodies to it with the following command\n\n```bash\nnpx supabase-comments-extension run-migrations \u003csupabase-connection-string\u003e\n```\n\nYou can find your connection string on the supabase dashboard: https://app.supabase.io/project/PUT-YOUR-PROJECT-ID-HERE/settings/database\n\nIt should look something like this: `postgresql://postgres:some-made-up-password@db.ddziybrgjepxqpsflsiv.supabase.co:5432/postgres`\n\n### Usage With Auth\n\nThen in your app code you can add comments with the following\n\n```jsx\nimport { useState } from 'react';\nimport { createClient } from '@supabase/supabase-js';\nimport {\n  Comments,\n  AuthModal,\n  CommentsProvider,\n} from 'supabase-comments-extension';\n\nconst supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);\n\nconst App = () =\u003e {\n  const [modalVisible, setModalVisible] = useState(false);\n\n  return (\n    \u003cCommentsProvider\n      supabaseClient={supabase}\n      onAuthRequested={() =\u003e setModalVisible(true)}\n    \u003e\n      \u003cAuthModal\n        visible={modalVisible}\n        onAuthenticate={() =\u003e setModalVisible(false)}\n        onClose={() =\u003e setModalVisible(false)}\n\tproviders={['google', 'facebook']}\n      /\u003e\n      \u003cComments topic=\"tutorial-one\" /\u003e\n    \u003c/CommentsProvider\u003e\n  );\n};\n```\n\nNote that [supabase supports social auth with dozens of providers out-of-the-box](https://supabase.com/docs/guides/auth#authentication) so you can sign in with Google, Facebook, Twitter, Github and many more.\n\nsupabase-comments-extension exports two auth components, `Auth` and `AuthModal`. The `Auth` component is a small adaptation of [@supabase/ui's Auth component](https://ui.supabase.io/components/auth) and supports all of the same props. `AuthModal` also supports all of the same props as the `Auth` component along with [a few additional props](https://github.com/malerba118/supabase-comments-extension/edit/main/README.md#api).\n\nLastly, if you want to write your own authentication ui, then know that the supbase client provides a method `supabase.auth.signIn` which can authenticate the supabase client without forcing any ui on you.\n\n```tsx\nimport { createClient } from '@supabase/supabase-js';\n\nconst supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);\n\n// Social Auth\nconst { user, error } = await supabase.auth.signIn({\n  provider: 'facebook',\n})\n\n// Email/Password Auth\nconst { user, error } = await supabase.auth.signIn({\n  email: 'example@email.com',\n  password: 'example-password',\n})\n```\n\n### Usage Without Auth\n\nIf you already have an app set up with supabase authentication,\nthen you can skip the `AuthModal` and direct the user to your\nexisting sign-in system.\n\n```jsx\nimport { useState } from 'react';\nimport { createClient } from '@supabase/supabase-js';\nimport { Comments, CommentsProvider } from 'supabase-comments-extension';\n\nconst supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);\n\nconst App = () =\u003e {\n  return (\n    \u003cCommentsProvider\n      supabaseClient={supabase}\n      onAuthRequested={() =\u003e {\n        window.location.href = '/sign-in';\n      }}\n    \u003e\n      \u003cComments topic=\"tutorial-one\" /\u003e\n    \u003c/CommentsProvider\u003e\n  );\n};\n```\n\n## Advanced Features\n\nsupabase-comments-extension includes a handful of customization options to meet your app's needs\n\n### Bring Your Own Reactions\n\nYou can add your own reactions by adding rows to the `sce_reactions` table.\n\n\u003cimg width=\"838\" alt=\"Screen Shot 2022-02-01 at 4 31 55 PM\" src=\"https://user-images.githubusercontent.com/5760059/152088763-8de5ac3f-ebc6-4337-8ad7-073ce63b288b.png\"\u003e\n\nIt's easy to add rows via the supabase dashboard or if you prefer you can write some sql to insert new rows.\n\n```sql\ninsert into sce_reactions(type, label, url) values ('heart', 'Heart', 'https://emojis.slackmojis.com/emojis/images/1596061862/9845/meow_heart.png?1596061862');\ninsert into sce_reactions(type, label, url) values ('like', 'Like', 'https://emojis.slackmojis.com/emojis/images/1588108689/8789/fb-like.png?1588108689');\ninsert into sce_reactions(type, label, url) values ('party-blob', 'Party Blob', 'https://emojis.slackmojis.com/emojis/images/1547582922/5197/party_blob.gif?1547582922');\n```\n\n### Custom Reaction Rendering\n\nIf you want to customize the way comment reactions are rendered then you're in luck!\nYou can pass your own `CommentReactions` component to control exactly how reactions are rendered beneath each comment.\n\n```tsx\nimport { useState } from 'react';\nimport { createClient } from '@supabase/supabase-js';\nimport { Button } from '@supabase/ui';\nimport {\n  Comments,\n  CommentsProvider,\n  CommentReactionsProps,\n} from 'supabase-comments-extension';\n\nconst supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);\n\nconst CustomCommentReactions: FC\u003cCommentReactionsProps\u003e = ({\n  activeReactions,\n  toggleReaction,\n}) =\u003e {\n  return (\n    \u003cButton className=\"!py-0.5\" onClick={() =\u003e toggleReaction('like')}\u003e\n      {activeReactions.has('like') ? 'unlike' : 'like'}\n    \u003c/Button\u003e\n  );\n};\n\nconst App = () =\u003e {\n  return (\n    \u003cCommentsProvider\n      supabaseClient={supabase}\n      components={{\n        CommentReactions: CustomCommentReactions,\n      }}\n    \u003e\n      \u003cComments topic=\"custom-reactions\" /\u003e\n    \u003c/CommentsProvider\u003e\n  );\n};\n```\n\nThe above code will render the following ui\n\n\u003cimg width=\"548\" alt=\"Screen Shot 2022-02-01 at 8 34 33 PM\" src=\"https://user-images.githubusercontent.com/5760059/152089497-515113e0-5281-4a2e-8c58-5f8c2e40f812.png\"\u003e\n\n### Handling Mentions\n\nThis library includes support for mentions, however mentions are fairly useless without a way to notify the users who are mentioned. You can listen to mentions via postgres triggers and perform some action in response such as insert into a notifications table or send an http request to a custom endpoint.\n\n```sql\nCREATE OR REPLACE FUNCTION notify_mentioned_users()\n  RETURNS trigger AS\n$$\nDECLARE\n  mentioned_user_id uuid;\nBEGIN\n  FOREACH mentioned_user_id IN ARRAY NEW.mentioned_user_ids LOOP\n\t  INSERT INTO your_notifications_table (actor, action, receiver) VALUES(NEW.user_id, 'mention', mentioned_user_id);\n  END LOOP;\nRETURN NEW;\nEND;\n$$\nLANGUAGE 'plpgsql';\n\nCREATE TRIGGER comment_insert_trigger\n  AFTER INSERT\n  ON sce_comments\n  FOR EACH ROW\n  EXECUTE PROCEDURE notify_mentioned_users();\n```\n\nIf you don't care about mentions, then you can disable them via the `CommentsProvider`\n\n```tsx\n\u003cCommentsProvider supabaseClient={supabase} enableMentions={false}\u003e\n  \u003cComments topic=\"mentions-disabled\" /\u003e\n\u003c/CommentsProvider\u003e\n```\n\n## API \n\nHere's the prop options for primary components you'll be working with\n\n```tsx\ninterface CommentsProviderProps {\n  queryClient?: QueryClient;\n  supabaseClient: SupabaseClient;\n  onAuthRequested?: () =\u003e void;\n  onUserClick?: (user: DisplayUser) =\u003e void;\n  mode?: 'light' | 'dark';\n  accentColor?: string;\n  onError?: (error: ApiError, query: Query) =\u003e void;\n  components?: {\n    CommentReactions?: ComponentType\u003c{\n      activeReactions: Set\u003cstring\u003e;\n      reactionsMetadata: api.CommentReactionMetadata[];\n      toggleReaction: (reactionType: string) =\u003e void;\n    }\u003e;\n  };\n  enableMentions?: boolean;\n}\n\ninterface CommentsProps {\n  topic: string;\n}\n\ninterface AuthModalProps extends AuthProps {\n  visible: boolean;\n  onClose?: () =\u003e void;\n  onAuthenticate?: (session: Session) =\u003e void;\n  title?: string;\n  description?: string;\n}\n\n// This comes from @supabase/ui (https://ui.supabase.io/components/auth)\n// supabase-comments-extension provides an adapted version of supabase ui's\n// Auth component with support for display names/avatars\ninterface AuthProps {\n  supabaseClient: SupabaseClient\n  className?: string\n  children?: React.ReactNode\n  style?: React.CSSProperties\n  socialLayout?: 'horizontal' | 'vertical'\n  socialColors?: boolean\n  socialButtonSize?: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge'\n  providers?: Provider[]\n  verticalSocialLayout?: any\n  view?: ViewType\n  redirectTo?: RedirectTo\n  onlyThirdPartyProviders?: boolean\n  magicLink?: boolean\n}\n```\n\u003c!-- \nIn addition, supabase-comments-extension exports a bunch of lower level building blocks which you may or may not need\n\n```jsx\n// components\nAvatar\nComment\nCommentReaction\nCommentReactions\nReaction\nReactionSelector\n// hooks\nuseComment\nuseComments\nuseAddComment\nuseUpdateComment\nuseDeleteComment\nuseReaction\nuseReactions\nuseAddReaction\nuseRemoveReaction\nuseCommentReactions\nuseSearchUsers\nuseUser\n``` --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalerba118%2Fsupabase-comments-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmalerba118%2Fsupabase-comments-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalerba118%2Fsupabase-comments-extension/lists"}