diff --git a/README.md b/README.md index b3f6f8a..cf82e5e 100644 --- a/README.md +++ b/README.md @@ -1,100 +1,92 @@ -# shareon +# Shareon -shareon logo — the Postal Horn emoji +Shareon logo — the Postal Horn emoji -> Lightweight, stylish and ethical share buttons +> Lightweight, stylish, and ethical share buttons - **Small.** Dependency-free. CSS+JS bundle is only 6 KB minified and gzipped. -- **Stylish.** Uses official vector logos and colors with no visual mess. +- **Stylish.** Uses official vector logos and colours with no visual mess. - **Ethical.** Embeds no tracking code. JS is required only for the setup. -shareon demo screenshot +Shareon demo screenshot ---- - -Observe the live demo here: [shareon.js.org](https://shareon.js.org) +See the live demo at [shareon.js.org](https://shareon.js.org) ## Install -Include the link to shareon's JS and CSS in your website: +Simply load the needed files from the CDN: ```html ``` -or install it via NPM use it in a JS file that you will bundle: +- `defer` makes sure Shareon is loaded after HTML is parsed +- `init` will automatically initialize Shareon buttons -```sh -npm install shareon -# or -yarn add shareon -``` +### Do not auto-initialize -```js -const shareon = require("shareon"); -// or -import shareon from "shareon"; -``` - -## Initialization - -By default, shareon will initialize every button after page load. It also -exports the `shareon` function, that will let you repopulate your buttons with -updated information (for example, if you changed the page title): - -```js -// shareon auto-initializes - -window.title = "Cool new window title"; -shareon(); -``` - -If you want to postpone the initialization, you can import the `noinit`-version -of the package. You'll need to manually call the `shareon` function when you -want the buttons to be initialized: +Remove the `init` attribute and initialize Shareon when you need it: ```html - - - ``` -or, if you're using Node: +### Use ESM build + +There is also a ESM build for the browsers, which doesn't support +auto-initialization: + +```html + +``` + +### Bundle with Node + +You can also install Shareon using your favourite package manager and include it +in your source files: + +```sh +pnpm add shareon # or `npm install`, or `yarn add` +``` ```js -const shareon = require("shareon/dist/noinit/shareon"); -// or -import shareon from "shareon/dist/noinit/shareon"; +import { init } from "shareon"; -// do something important -shareon(); +init(); +``` + +CommonJS imports are also supported: + +```js +const Shareon = require("shareon"); + +Shareon.init(); ``` ## Usage -> shareon was heavily inspired by [Likely](https://ilyabirman.net/projects/likely/), -> and has a backwards-compatible API (excluding themes and sizes). - -Create a container with class `shareon` and populate it with elements, whose -classes match the names of social networks: +Create a container with class `shareon` and populate it with elements, class +names of which match the names of the social networks: ```html
@@ -106,24 +98,31 @@ classes match the names of social networks: - - - - - - + + + + + +
``` -If you use ``, the buttons will get a `href`-attribute to them. In other cases -they will get a listener on `click` event, so you can use `