add react tip button

Author: Yury Shapkarin

README.md

@@ -22,6 +22,9 @@ all, and write your own instead.
 
 ## Usage
 
+- [Plain JavaScript](#.button-(%60superheroUtils.createButton%60))
+- [React.js](#.reactjs-component)
+
 ### 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
@@ -79,6 +82,19 @@ Additional examples can be found [here](./index.html).
 
 <img width="607" alt="Paywall" src="https://user-images.githubusercontent.com/9007851/95088220-58d0d000-072b-11eb-8cd6-57052d40765c.png">
 
+## React.js component
+
+### Usage with ES6
+
+Props the same with [plain js vesrion](#Button-(`superheroUtils.createButton`)).
+
+#### Example: 
+```js
+import Button from '@aeternity/superhero-utils/button-react';
+
+<Button size="icon" account="example.chain">
+```
+
 ## Start the project for development
 
 You need to install [Node.js](https://nodejs.org/) firstly.

package.json

@@ -4,7 +4,6 @@
   "description": "",
   "main": "dist/index.js",
   "browser": "dist/index.js",
-  "dependencies": {},
   "files": [
     "dist",
     "src"
@@ -27,6 +26,10 @@
     "webpack": "^4.44.1",
     "webpack-cli": "^3.3.12"
   },
+  "optionalDependencies": {
+    "prop-types": "^15.7.2",
+    "react": "^17.0.0"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "npm run build && serve",

src/button-react.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import createButton from './button';
+
+export default class Button extends React.Component {
+  constructor(props) {
+    super(props);
+    this.button = React.createRef();
+    this.componentDidMount = this.componentDidUpdate = () =>
+      createButton(this.button.current, this.props);
+  }
+
+  render() {
+    return React.createElement('div', { ref: this.button });
+  }
+};
+
+Button.propTypes = {
+  size: PropTypes.oneOf(['icon', 'small', 'medium', 'large']),
+  url: PropTypes.string,
+  account: PropTypes.string,
+};

webpack.config.js

@@ -2,14 +2,21 @@ const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
-const genConfig = (filename, { inlineCss } = {}) => ({
+const genConfig = (outputFilename, { inlineCss, inputName = 'index.js' } = {}) => ({
   output: {
     path: path.resolve(__dirname, 'dist'),
-    filename,
+    filename: outputFilename,
     library: 'superheroUtils',
     libraryTarget: 'umd'
   },
+  entry: {
+    entry: `./src/${inputName}`,
+  },
   target: 'web',
+  externals: {
+    'prop-types': 'prop-types',
+    'react': 'react'
+  },
   module: {
     rules: [
       {
@@ -40,4 +47,5 @@ const genConfig = (filename, { inlineCss } = {}) => ({
 module.exports = [
   genConfig('index-without-styles.js'),
   genConfig('index.js', { inlineCss: true }),
+  genConfig('button-react.js', { inputName: 'button-react.js'}),
 ];