Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nanxiaobei/react-live-island

🏝 Dynamic Island for React
https://github.com/nanxiaobei/react-live-island

apple dynamic-island ios nextjs react

Last synced: about 2 months ago
JSON representation

🏝 Dynamic Island for React

Host: GitHub
URL: https://github.com/nanxiaobei/react-live-island
Owner: nanxiaobei
License: mit
Created: 2023-09-14T19:24:42.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-04-10T17:49:43.000Z (9 months ago)
Last Synced: 2024-10-28T16:59:39.493Z (2 months ago)
Topics: apple, dynamic-island, ios, nextjs, react
Language: TypeScript
Homepage:
Size: 86.9 KB
Stars: 42
Watchers: 2
Forks: 5
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        


Link in bio to **widgets**,

your online **home screen**. ➫ [🔗 kee.so](https://kee.so/)



---



# react-live-island

**by [🐤 kee.so](https://kee.so/)**

Dynamic Island 🏝 for ⚛️ React

[![npm](https://img.shields.io/npm/v/react-live-island.svg?style=flat-square)](https://www.npmjs.com/package/react-live-island)

[![npm](https://img.shields.io/npm/dt/react-live-island?style=flat-square)](https://www.npmtrends.com/react-live-island)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-live-island?style=flat-square)](https://bundlephobia.com/result?p=react-live-island)

[![GitHub](https://img.shields.io/github/license/nanxiaobei/react-live-island?style=flat-square)](https://github.com/nanxiaobei/react-live-island/blob/main/LICENSE)

[![npm type definitions](https://img.shields.io/npm/types/typescript?style=flat-square)](https://github.com/nanxiaobei/react-live-island/blob/main/src/types.ts)



## Install

```sh

pnpm add react-live-island

# or

yarn add react-live-island

# or

npm i react-live-island

```

## Usage

```jsx

import LiveIsland from 'react-live-island';

const Demo = () => {

  return {(isSmall) => (isSmall ? 'small' : 'large')};

};

```

[![Edit react-live-island](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-live-island-dzkl96?fontsize=14&hidenavigation=1&theme=dark)

## Props

| Prop               | Type                              | Default   | Description                                   |

| ------------------ | --------------------------------- | --------- | --------------------------------------------- |

| `className`        | `string`                          | `''`      | Class name of the island                      |

| `top`              | `number\|string`                  | `10`      | Top egde of the island                        |

| `smallClassName`   | `string`                          | `''`      | Class name of the **small** island            |

| `smallWidth`       | `number\|string`                  | `96`      | Width of the **small** island                 |

| `smallHeight`      | `number\|string`                  | `30`      | Height of the **small** island                |

| `largeClassName`   | `string`                          | `''`      | Class name of the **large** island            |

| `largeWidth`       | `number\|string`                  | `400`     | Width of the **large** island                 |

| `largeHeight`      | `number\|string`                  | `180`     | Height of the **large** island                |

| `largeRadius`      | `number\|string`                  | `36`      | Border radius of the **large** island         |

| `wrapperClassName` | `string`                          | `''`      | Class name of the whole container             |

| `triggerType`      | `'click'\|'hover'`                | `'click'` | Trigger mode for open                         |

| `initialAnimation` | `boolean`                         | `false`   | Whether show animiation on enter              |

| `onChange`         | `(isSmall: boolean) => void`      | -         | Call when the island open & close             |

| `children`         | `(isSmall: boolean) => ReactNode` | -         | Render funtion to define the island's content |

## License

[MIT License](https://github.com/nanxiaobei/react-live-island/blob/main/LICENSE) (c) [nanxiaobei](https://lee.so/)