!Built With Stencil

Mastodon share button

This package is a user friendly web component to share in mastodon.

Browsers support

|
IE / Edge |
Firefox |
Chrome |
Safari |
iOS Safari |
Samsung |
| --------- | --------- | --------- | --------- | --------- | --------- |
| IE11 (limited), Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions

View demos 👁

Preview


Getting Started

Installation

$3

``html

`

$3

`bash
$ npm install mastodon-share-button
`

$3

`html




instances='["https://mastodon.eus", "https://mastodon.jalgi.eus"]'
share_message="Text to share"
share_button_text="Custom share button text"
close_button_text="Custom close text"
send_button_text="Custom send text"
modal_title="Custom modal title"
other_instance_text="Custom other instance select option text"
dark_mode="true">

`

Documentation

Properties

| Property | Attribute | Required | Description | Type | Default |
| --------------------- | --------------------- | ------------ | -------------------------------------------------- | -------- | -------------------------------- |
| share_message | share_message | Required | Text to share in mastodon. |string | undefined |
| instances | instances | Not Required | List of instances to display in the select option. |string | '["https://mastodon.social"]' |
| dark_mode | dark_mode | Not Required | Option to activate dark mode. |boolean | false |
| send_button_text | send_button_text | Not Required | Text to show at the bottom of sharing in the modal.|string | "Send" |
| icon_url | icon_url | Not Required | Icon url. Put it "" to not display any icon. |string | mastodon oficial logo |
| modal_title | modal_title | Not Required | Title to display in modal. |string | "Share to Mastodon" |
| close_button_text | close_button_text | Not Required | Text to display to close modal. |string | "Close" |
| other_instance_text | other_instance_text | Not Required | Text to display on the form. |string | "Other instance" |
| share_button_text | share_button_text | Not Required | Text to show at the bottom of sharing. Put it "" to not display any text. |string | "Share to Mastodon" |
| open | open | Not Required | Variable to display the modal opened. |boolean | false |

CSS Custom Properties (Styling)

The component could be styled with the help of CSS3 variables.

Example:

`html

`

* Important: If you are using the dark mode, you cannot apply any color variable, because this mode will overlap your css.

$3


| Name | Description
| ------------------------------- | --------------------------------------------------------------------|
| --share-button-background-color | Share button background color. Default to #cccccc |
| --share-button-background-color-hover | Share button background hover color. Default to #949292 |
| --share-button-border-radius | Default to 5px |
| --share-button-padding | Default to 12px |
| --share-button-color | Default to #ffffff |
| --share-button-font-size | Default to 16px |
| --share-button-font-weight | Default to bold |
| --share-button-border | Defaul to none |

$3

| Name | Description
| -------------------------- | -----------------------------------------------------|
| --modal-title-color | Text color to modal title. Default to #2c3e50 |
| --modal-background-color | Modal background color. Default to #ffffff |

$3

| Name | Description
| ------------------------------- | --------------------------------------------------------------------|
| --close-modal-button-background-color | Close button background color. Default to #cccccc |
| --close-modal-button-background-color-hover | Share button background hover color. Default to #949292 |
| --close-modal-button-border-radius | Default to 5px |
| --close-modal-button-padding | Default to 6px |
| --close-modal-button-color | Default to #ffffff |
| --close-modal-button-font-size | Default to 16px |
| --close-modal-button-font-weight | Default to bold |
| --close-modal-button-border | Defaul to none |

$3

| Name | Description
| -------------------------- | ----------------------------------------------------- |
| --select-color | Select and input font color. Default to #2c3e50 |
| --select-background-color | Select and input background color. Default to #ffffff |
| --select-border | Select and input border. Default to 2px solid #2c3e50 |
| --select-font-weight | Select and input font weight. Default to bolder |
| --select-font-size | Font size. Default to 18px |
| --select-padding | Default to 10px |
| --select-border-radius | Default to 0.25em |
| --select-line-height | Default to 3 |

$3

| Name | Description
| ------------------------------------ | ------------------------------- |
| --send-modal-button-color | Default to #ffffff |
| --send-modal-button-background-color | Default to #2692da |
| --send-modal-button-border-radius | Default to 5px |
| --send-modal-button-width | Default to 100% |
| --send-modal-button-height | Default to 6vh |
| --send-modal-button-min-height | Default to 42px |
| --send-modal-button-font-size | Default to 4vh` |