HomeGetting StartedAPI ReferenceRecipes
useCommentsGetting StartedAPI ReferenceRecipes

Let's talk.

Effortlessly add a comment section to your website,
and start the discussion on your content.


0 comments

What is it?

🎃 Headless React Hook

useComments just cares about the data. You write your own UI.

👺 Backed with Hasura

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!

🚀 Quick and easy

The setup will take less than 5 minutes.

Getting started

Let's add comments to a website in five simple steps!

  1. Deploy Hasura

    Click this 👇 to deploy a fresh Hasura instance.

    Deploy Hasura to Heroku

    Check out the docs for more details. You can find more options for one-click deployment there.

  2. 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.

  3. 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:

  4. 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:

    <script
    crossorigin
    src="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:

  5. Create beautiful UI for your comments

    Start off from one of the examples or write it from scratch.