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
- Default styling
- 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
- npm install nostr-comments-widget-react
- Don't create an account anywhere
- Don't configure a database
- 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
- On publish, if tags prop doesn't exist in event object, getting JS error 'nostx ...??'