Update docs
parent
14558ac201
commit
bece4cdcf2
47
README.md
47
README.md
|
@ -18,8 +18,8 @@ Observe the live demo here: [shareon.js.org](https://shareon.js.org)
|
||||||
Include the link to shareon's JS and CSS in your website:
|
Include the link to shareon's JS and CSS in your website:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<link href="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.css" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css" rel="stylesheet">
|
||||||
<script src="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.js" type="text/javascript"></script>
|
<script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js" type="text/javascript"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
or install it via NPM use it in a JS file that you will bundle:
|
or install it via NPM use it in a JS file that you will bundle:
|
||||||
|
@ -31,7 +31,48 @@ yarn add shareon
|
||||||
```
|
```
|
||||||
|
|
||||||
```js
|
```js
|
||||||
require('shareon');
|
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:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- notice the 'noinit' section of the url for JS -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/noinit/shareon.min.css" rel="stylesheet">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js" type="text/javascript"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
// do something important
|
||||||
|
shareon();
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
or, if you're using Node:
|
||||||
|
|
||||||
|
```js
|
||||||
|
const shareon = require('shareon/dist/noinit/shareon');
|
||||||
|
// or
|
||||||
|
import shareon from 'shareon/dist/noinit/shareon';
|
||||||
|
|
||||||
|
// do something important
|
||||||
|
shareon();
|
||||||
```
|
```
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
|
@ -103,14 +103,60 @@
|
||||||
Include the link to shareon's JS and CSS in your website:
|
Include the link to shareon's JS and CSS in your website:
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<pre><code><link href="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.css"
|
<pre><code><link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css"
|
||||||
rel="stylesheet">
|
rel="stylesheet">
|
||||||
<script src="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.js"
|
<script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js"
|
||||||
type="text/javascript"></script></code></pre>
|
type="text/javascript"></script></code></pre>
|
||||||
|
|
||||||
<p>or install it via NPM use it in a JS file that you will later bundle:</p>
|
<p>or install it via NPM and use it in a JS file that you will later bundle:</p>
|
||||||
<pre><code>require('shareon');</code></pre>
|
<pre><code>const shareon = require('shareon');</code></pre>
|
||||||
<pre><code>import 'shareon';</code></pre>
|
<pre><code>import shareon from 'shareon';</code></pre>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>
|
||||||
|
<a id="initialization" href="#initialization" aria-hidden="true"></a>
|
||||||
|
Initialization
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
By default, shareon will initialize every button after page load.
|
||||||
|
It also exports the <code>shareon</code> function, that will let
|
||||||
|
you repopulate your buttons with updated information (for example,
|
||||||
|
if you changed the page title):
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<pre><code>// shareon auto-initializes
|
||||||
|
|
||||||
|
window.title = "Cool new window title";
|
||||||
|
shareon();</code></pre>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
If you want to postpone the initialization, you can import the
|
||||||
|
<code>noinit</code>-version of the package. You'll need to
|
||||||
|
manually call the <code>shareon</code> function when you want the
|
||||||
|
buttons to be initialized:
|
||||||
|
</p>
|
||||||
|
<pre><code><!-- notice the 'noinit' section of the url for JS -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js"
|
||||||
|
type="text/javascript"></script>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css"
|
||||||
|
rel="stylesheet">
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
// do something important
|
||||||
|
shareon();
|
||||||
|
</script></code></pre>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
or, if you're using Node:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<pre><code>const shareon = require('shareon');
|
||||||
|
// or
|
||||||
|
import shareon from 'shareon';
|
||||||
|
|
||||||
|
// do something important
|
||||||
|
shareon();</code></pre>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article>
|
<article>
|
||||||
|
@ -225,7 +271,7 @@
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.css" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css" rel="stylesheet">
|
||||||
<script src="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.js" type="text/javascript"></script>
|
<script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js" type="text/javascript"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue