@readr-media/share-button ·

Share-Button / 社群分享展開按鈕

Feature

• 可傳入 pathColor，調整 Button 的 svg path 顏色。
• 可傳入 direction，調整展開方向（ "vertical" / "horizon" )。
• 使用預設的 className : .share-button 調整 Button 尺寸或樣式，或傳入自訂的 className，並以該 className 進行調整。
• 可傳入 onClick, FbClick, LineClick, LinkClick ，設定按鈕點擊後所觸發的函式。( 可利用此 props 設定 GA Event )
• 備註：「已複製連結至剪貼簿」( /src/react-components/copy-alert ) 有設定 z-index，淡入時 z-index = 9999（確保在不同專案下，複製的彈出畫面都能位於最上層不被遮蓋） ; 淡出後設定為：display:none。

How to Use This Pkg?

1. Install the npm package yarn add @readr-media/share-button
2. Import component in the desired place

import styled from 'styled-components'
import { ShareButton } from '@readr-media/share-button'

export default function SomeComponent() {

  function handleClickButton() {
    console.log('click share-button')
  }
  function handleClickLine() {
    console.log('click Line icon')
  }
  function handleClickFB() {
    console.log('click FB icon')
  }
  function handleClickLink() {
    console.log('click Link icon')
  }

  return (
    <>
      <ShareButton
        pathColor="blue"
        direction="horizon"
        className="custom-name"
        onClick={handleClickButton}
        LineClick={handleClickLine}
        FbClick={handleClickFB}
        LinkClick={handleClickLink}
      />
    </>
  )
}

Props

名稱	資料型別	必須	預設值	說明
pathColor	String		"#000000"	設定 Button svg path 顏色。
direction	String		"vertical"	設定 Button 展開方向。
className	String		"share-button"	自訂 className。如無傳入自訂 className，仍可透過 .share-button 更改 LOGO 樣式或尺寸。
onClick	MouseEventHandler			點擊 share-button 後觸發之函式。
FbClick	MouseEventHandler			點擊 FB Icon 後觸發之函式。
LineClick	MouseEventHandler			點擊 Line Icon 後觸發之函式。
LinkClick	MouseEventHandler			點擊 Link Icon 後觸發之函式。

Installation

yarn install

Development

$ yarn dev
// or
$ npm run dev
// or
$ make dev

Build (Webpack Bundles and ES5 Transpiling)

$ yarn build
// or
$ npm run build
// or
$ make build

Transpile React, ES6 Codes to ES5

$ make build-lib

NPM Publish

After executing Build scripts, we will have /lib folders, and then we can execute publish command,

npm publish

Note: before publish npm package, we need to bump the package version first.

TODOs

• [ ] 建立 CI pipeline，透過 CI 產生 npm package，並且上傳至 npm registry
• [ ] 透過 Lerna 控制 packages 之間的版號