Nostr Share Component

Usage

In the <head> tag
Note that you need to change the {VERSION} part as appropriate (e.g. 0.1.2).

Please check the version information here:

<script src="https://cdn.jsdelivr.net/npm/@konemono/nostr-share-component@{VERSION}/dist/nostr-share-component.min.js"></script>

In the <body> tag

<nostr-share></nostr-share>

Attributes

data-text: Share text.

If empty, the title and URL of the current site will be shared.

data-type: Can be one of default, icon, or mini. This changes the button style as shown in the example. icon-size: For the icon type, you can specify the icon size using the icon-size attribute.

Style (Upper v0.4.0)

Customize the style of specific parts of the nostr-share component using the ::part pseudo-element. The component includes two primary parts that can be styled:

button: The button part inside the nostr-share element.
text: The text part inside the nostr-share element.

For example, you can style the button part as follows:

nostr-share::part(button) {
    background-color: rgb(0, 136, 255);
}

nostr-share::part(button):hover {
    background-color: rgb(255, 0, 0);
}

And you can style the text part like this:

nostr-share::part(text) {
    font-style: italic;
    font-family: 'Courier New', Courier, monospace;
    font-size: medium;
}

(In v0.3 and earlier, custom styles were defined using the data-style field.)

Demo

simple

<nostr-share></nostr-share>

custom

data-text:

type icon

html

<nostr-share data-type="icon" data-text="さんぷるシェアテキスト https://example.com"></nostr-share>

type icon

html

<nostr-share data-type="icon" icon-size="72" data-text="さんぷるシェアテキスト https://example.com"></nostr-share>

type mini & custom style part(text)

html

<nostr-share data-type="mini" data-text="さんぷるシェアテキスト https://example.com"></nostr-share>

css

nostr-share::part(text) {
            font-style: italic;
            font-family: 'Courier New', Courier, monospace;
            font-size: medium;
          }

custom text $ custom style part(button)

カスタム

html

<nostr-share data-text="さんぷるシェアテキスト https://example.com">カスタム</nostr-share>

css

nostr-share::part(button) {
            background-color: rgb(0, 136, 255);
          }
      
          nostr-share::part(button):hover {
            background-color: rgb(255, 0, 0);
          }