isabella232 / superhero-utils

Superhero Tip button widget for creators

Superhero Utils

Installation

You can get it as npm package or from the unpkg.com.

With npm

• run $ npm install @aeternity/superhero-utils --save in the root or your project
• import this package by import superheroUtils from '@aeternity/superhero-utils';

With unpkg.com and <script> tag

Add this to your website's HTML:

<script src="https://unpkg.com/@aeternity/[email protected]/dist/index.js"></script>

This will define superheroUtils in the global scope.

With custom styles

You can import and process styles manually by importing dist/index.css and dist/index-without-styles.js separately. Or even you can don't import styles at all, and write your own instead.

React and Vue versions

By default dist/index.js is imported, instead of it, you can import a specific version for React or Vue by importing dist/react-without-styles.js or dist/vue-without-styles.js accordingly. The framework-specific version contains all features available in the default one plus specific for particular framework wrappers.

Usage

Button

superheroUtils.createButton

This library exports a function that creates buttons. This function accepts arguments:

• class name of nodes that should become buttons, or the DOM node itself
• options object

Option	Description
size	Default icon. Possible values icon, large, medium, small. See the screenshots section below.
account	Optional. When set you can easily claim your tips. Accepts account public key or name ending with .chain.
url	Optional. Url to be tipped. Default is set to the current page url.

Example

<div class="my-button">Donate</div>
<script type="text/javascript">
  superheroUtils.createButton('.my-button', {
    size: 'large',
    account: 'example.chain',
    url: 'https://example.com',
  });
</script>

Select the button style you like the most and adopt this code to your website's HTML. Additional examples can be found here.

Screenshots

Size value	Screenshot
icon
small
medium
large

superheroUtils.createButtonByDiv

The same function as the previous one except that the first argument should be an instance of HTMLDivElement. The button content will be added to that node instead of the DOM node replacing. The function with this interface simplifies integration into Frontend frameworks like Vue and React.

superheroUtils.Button (only in React and Vue versions)

The component that is compatible with the corresponding framework. Accepts the same properties as superheroUtils.createButton's options.

Example

<Button size="large" account="example.chain" url="https://example.com" />

Paywall (superheroUtils.ensurePaid)

This function asks the user to send a tip to the specified page. It won't ask to send a tip if it was sent before using the current browser. The function accepts options object.

Option	Description
url	Optional. Url to be required to pay for. Default is set to the current page url.

Example

<script type="text/javascript">
  superheroUtils.ensurePaid({ url: 'https://example.com' });
</script>

Additional examples can be found here.

Screenshots

Start the project for development

You need to install Node.js firstly.

$ npm install
$ npm install --prefix examples/react-webpack
$ npm install --prefix examples/vue-webpack
$ npm start

Build for production

$ npm run build