open-heart-element
TypeScript icon, indicating that this package has built-in type declarations

0.0.13 • Public • Published

<open-heart>

A button for the Open Heart Protocol.

🚧 Highly experimental. Tag a version to avoid unexpected changes.

Usage

<!-- Include `OpenHeartElement` -->
<script src="https://unpkg.com/open-heart-element" type="module" defer></script>

<!-- Render `<open-heart>` -->
<open-heart href="https://httpbin.org/post?id=x" emoji="❤️"></open-heart>

This sends a POST to the href with ❤️ in the body, and sets a key in localStorage to remember that a heart has been sent for this href.

Styling

This element does not come with any styling. Feel free to take whatever that's on the demo page.

If you wrote some cool CSS for this, feel free to send a pull request with a demo page and I can list it here for others to reference:

Attributes

Functional

  • href: Required. Specify a URL where a POST request would be sent to.
  • emoji: Required. Specify an emoji.

States

  • [disabled]: Present when a heart has been sent.
  • [aria-pressed="true"]: Present when a heart has been sent.
  • [aria-busy="true"]: Present when a heart is being sent.

API

  • openHeart.getCount(): Sends a GET request to href, expects a JSON response like {'${this.emoji}': count} and sets <open-heart count="${count}"> if successful.

Event

  • open-heart: Bubbles. This is dispatched after a reaction is sent.

Readme

Keywords

none

Package Sidebar

Install

npm i open-heart-element

Weekly Downloads

90

Version

0.0.13

License

MIT

Unpacked Size

6.01 kB

Total Files

5

Last publish

Collaborators

  • muan