nostr-comments-widget-react

This is an embeddable nostr comments widget that "just works".

Try it out at https://nostr-comments.web.app/ or add it to your own site

Demo/Sample

1. Default styling

2. Custom styling

--nostr-comments-background: #003049;
--nostr-comments-text-color: #eae2b7;
--nostr-comments-text-color-dark: #fcbf49;
--nostr-comments-primary-color: #fcbf49;
--nostr-comments-primary-contrast: #003049;

Installation

1. npm install nostr-comments-widget-react
2. Don't create an account anywhere
3. Don't configure a database
4. It just works. You now have a chat about your website. The url is the identifier.

Usage

import { NostrComments } from 'nostr-comments-widget-react'
import 'nostr-comments-widget-react/lib/index.css'

function App() {
  return (
    ...
      <NostrComments relays={[
        'wss://nostr.drss.io',
        'wss://nostr-relay.freeberty.net',
        'wss://nostr.unknown.place',
        'wss://nostr-relay.untethr.me',
        'wss://relay.damus.io'
      ]} />
    ...
  );
}

Customization

The widget can be styled by the following CSS variables

  --nostr-comments-background - Background color
  --nostr-comments-text-color - Text color
  --nostr-comments-text-color-dark - Pubic key color
  --nostr-comments-primary-color - Button BG color
  --nostr-comments-primary-contrast - Button text color

Default:

:root {
  --nostr-comments-background: white
  --nostr-comments-text-color: #888
  --nostr-comments-text-color-dark: #222
  --nostr-comments-primary-color: #0d6efd
  --nostr-comments-primary-contrast: white
}

Roadmap

• DONE - User key generation / import, followed by profile setup (Name and avatar)
• Code cleanup
• More styles
• Comments pagination
• Typescript
• Profile edit / Metadata update
• [Demand based] Nested comments
• [Demand based] Markdown
• [Long shot] Pay sats to comment via Lightning integration

Warnings

• All messages are public even if your website is not
• All messages contain the URL of your website, so especially if that URL contains sensitive information, this widget should not be used in its current form!
• This software is experimental. Use at your own risk.

If you want to learn more about nostr, check out awesome-nostr.

Issues to report to fiatjaf

1. On publish, if tags prop doesn't exist in event object, getting JS error 'nostx ...??'