react-live-island
Dynamic Island ๐ for โ๏ธ React
Install
pnpm add react-live-island # or yarn add react-live-island # or npm i react-live-island
Usage
import LiveIsland from 'react-live-island';
const Demo = () => {
return <LiveIsland>{(isSmall) => (isSmall ? 'small' : 'large')}</LiveIsland>;
};
Props
PropTypeDefaultDescriptionclassNamestring''Class name of the islandtopnumber|string10Top egde of the islandsmallClassNamestring''Class name of the small islandsmallWidthnumber|string96Width of the small islandsmallHeightnumber|string30Height of the small islandlargeClassNamestring''Class name of the large islandlargeWidthnumber|string400Width of the large islandlargeHeightnumber|string180Height of the large islandlargeRadiusnumber|string36Border radius of the large islandwrapperClassNamestring''Class name of the whole containertriggerType'click'|'hover''click'Trigger mode for openinitialAnimationbooleanfalseWhether show animiation on enteronChange(isSmall: boolean) => voidโCall when the island open & closechildren(isSmall: boolean) => ReactNodeโRender funtion to define the islandโs content
