Let's talk.

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

0 comments

// You can edit this! 😱

const Comments = ({ postId }) => {
  const { comments, addComment, count, loading } = useComments(
    'https://use-comments.hasura.app/v1/graphql',
    postId
  );

  return (
    <section>
      <AddComment onSubmit={addComment} />
      <h3>{count} comments</h3>
      {loading ? (
        <Spinner />
      ) : (
        <div>
          {comments.map(({ author, content, created_at, status }) => (
            <article key={created_at}>
              <div>
                {`${author} ・ `}
                <time dateTime={created_at}>{formatDate(created_at)}</time>
                {status && ` ・ ${formatStatus(status)}`}
              </div>
              <p>{content}</p>
            </article>
          ))}
        </div>
      )}
    </section>
  );
};

render(<Comments postId="landing-page" />);

// You can edit this! 😱
const Comments = ({ postId }) => {
  const { comments, addComment, count, loading } = useComments(
    'https://use-comments.hasura.app/v1/graphql',
    postId
  );
  return (
    <section>
      <AddComment onSubmit={addComment} />
      <h3>{count} comments</h3>
      {loading ? (
        <Spinner />
      ) : (
        <div>
          {comments.map(({ author, content, created_at, status }) => (
            <article key={created_at}>
              <div>
                {`${author} ・ `}
                <time dateTime={created_at}>{formatDate(created_at)}</time>
                {status && ` ・ ${formatStatus(status)}`}
              </div>
              <p>{content}</p>
            </article>
          ))}
        </div>
      )}
    </section>
  );
};
render(<Comments postId="landing-page" />);

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!

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.
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:
```
<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:
Create beautiful UI for your comments
Start off from one of the examples or write it from scratch.