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

!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;
`
!Custom styling

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 (
...
'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
`

$3

`
: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 ...??'
2.