JavaScript初学者が1時間でNode.jsのReactLINEボタンモジュールつくった

uraway.hatenablog.com

前回と同じ要領で今度はLINEボタンのモジュールを作ってみました｡

uraway/react-line-button: Simple React comp... - GitHub

モジュールをまとめました｡ こちらを使用してください｡

uraway/react-social-sharebuttons: Simple Re... - GitHub

インストール

$ npm install --save react-line-button

使い方

プロパティとして送信内容であるtextと､ ボタンとして使用するimageを指定可能｡

import { LINEButton } from 'react-line-button';

class App extends React.Component {
  render() {
    let text = "LINEで送る";
    let image = "36x60";
    return (
      <LINEButton text={text} image={image} />
    );
  }
}

以下ソースコード｡ なぜがフォルダ内の画像の参照がうまく行かず､ 結局imgurにアップロードして画像を取得｡ スタイルももっとスリムにできそう｡

import React from 'react';
import ReactDOM from 'react-dom';

export default class LINEButton extends React.Component {
  static propTypes = {
    image: React.PropTypes.string,
    text: React.PropTypes.string,
  };

  constructor(props) {
    super(props);
    this.state = ({
      imageURL: '',
      height: '',
      width: '',
    });
  }

  componentDidMount() {
    if (this.props.image == '20x20') {
      this.setState({
        imageURL: 'http://i.imgur.com/voMN0NH.png',
        height: 20,
        width: 20,
      });
    } else if (this.props.image == '30x30') {
      this.setState({
        imageURL: 'http://i.imgur.com/Lkq9vFO.png',
        height: 30,
        width: 30,
      });
    } else if (this.props.image == '36x60') {
      this.setState({
        imageURL: 'http://i.imgur.com/5sEp1TC.png',
        height: 60,
        width: 36,
      });
    } else if (this.props.image == '40x40') {
      this.setState({
        imageURL: 'http://i.imgur.com/ZoU91JG.png',
        height: 40,
        width: 40,
      });
    } else {
      this.setState({
        imageURL: 'http://i.imgur.com/cfjCxrh.png',
        height: 20,
        width: 82,
      });
    }
  }

  render() {
    return (
     // textをURIエンコード処理
      <a href={'http://line.me/R/msg/text/?' + encodeURIComponent(this.props.text)}>
      <img
        src={this.state.imageURL}
        style={{ height:this.state.height, width:this.state.width }}
        alt="LINEで送る" /></a>
    );
  }
}