JavaScript初学者が1時間でNode.jsのReactLINEボタンモジュールつくった
前回と同じ要領で今度は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> ); } }