Effortlessly add a comment section to your website,
and start the discussion on your content.
useComments
just cares about the data. You write your own UI.
We need to keep all of these comments somewhere, right? Hasura, a GraphQL layer on top of a database, handles this for us! Don't worry, you'll get your Hasura up and running in 30 seconds!
The setup will take less than 5 minutes.
Let's add comments to a website in five simple steps!
Deploy Hasura
Click this 👇 to deploy a fresh Hasura instance.
Deploy Hasura to HerokuCheck out the docs for more details. You can find more options for one-click deployment there.
Set config vars in Heroku
In order to use our Hasura backend we need to set two enviromental variables in Heroku.
Setting
HASURA_GRAPHQL_ADMIN_SECRET
makes sure that your GraphQL endpoint and the Hasura console are not publicly
accessible.
HASURA_GRAPHQL_UNAUTHORIZED_ROLE
allows unauthenticated (non-logged in) users add and view comments.
Import database schema and metadata
In the next step we need to import database schema. Click here and copy paste the content.
We also need to import Hasura metadata to set all the permissions. Save this file, and import it in Hasura Console:
Install use-comments
npm install use-comments
yarn add use-comments
import { useComments, CommentStatus } from 'use-comments';const { comments, count, loading, refetch, error } = useComments(hasuraUrl,'landing-page');
Or add it from CDN:
<scriptcrossoriginsrc="https://unpkg.com/use-comments@0.1.3/dist/index.umd.js"></script><script type="module" async>const { useComments } = useComments;const { comments, count, loading, refetch, error } = useComments(hasuraUrl,'landing-page',);</script>
You can find your hasuraUrl
in the Hasura Console:
Create beautiful UI for your comments
Start off from one of the examples or write it from scratch.