react live island

バイオのリンク、ウィジェット、オンラインホーム画面。 ➫？？ kee.so

---

React-Live-Island

による ？ kee.so

ダイナミックアイランド？ ⚛️反応の場合

インストール

pnpm add react-live-island
# or
yarn add react-live-island
# or
npm i react-live-island

使用法

 import LiveIsland from 'react-live-island' ;

const Demo = ( ) => {
  return < LiveIsland > { ( isSmall ) => ( isSmall ? 'small' : 'large' ) } < / LiveIsland > ;
} ; 

小道具

小道具	タイプ	デフォルト	説明
className	string	''	島のクラス名
top	number|string	10	島のトップエグデ
smallClassName	string	''	小さな島のクラス名
smallWidth	number|string	96	小さな島の幅
smallHeight	number|string	30	小さな島の高さ
largeClassName	string	''	大きな島のクラス名
largeWidth	number|string	400	大きな島の幅
largeHeight	number|string	180	大きな島の高さ
largeRadius	number|string	36	大きな島の境界半径
wrapperClassName	string	''	コンテナ全体のクラス名
triggerType	'click'|'hover'	'click'	開くためのトリガーモード
initialAnimation	boolean	false	Enterでアニメーションを表示するかどうか
onChange	(isSmall: boolean) => void	-	島が開閉したときに電話してください
children	(isSmall: boolean) => ReactNode	-	島の内容を定義するためにFuntionをレンダリングします

ライセンス

MITライセンス（c）Nanxiaobei