{"id":13792133,"url":"https://github.com/nanxiaobei/react-live-island","last_synced_at":"2025-04-15T16:32:11.024Z","repository":{"id":194732969,"uuid":"691735531","full_name":"nanxiaobei/react-live-island","owner":"nanxiaobei","description":"🏝 Dynamic Island for React","archived":false,"fork":false,"pushed_at":"2024-04-10T17:49:43.000Z","size":89,"stargazers_count":42,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-28T16:59:39.493Z","etag":null,"topics":["apple","dynamic-island","ios","nextjs","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nanxiaobei.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-09-14T19:24:42.000Z","updated_at":"2024-09-30T17:49:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"4ed2145c-3314-49b9-afc4-0b0693079397","html_url":"https://github.com/nanxiaobei/react-live-island","commit_stats":null,"previous_names":["nanxiaobei/react-live-island"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanxiaobei%2Freact-live-island","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanxiaobei%2Freact-live-island/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanxiaobei%2Freact-live-island/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanxiaobei%2Freact-live-island/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nanxiaobei","download_url":"https://codeload.github.com/nanxiaobei/react-live-island/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223679348,"owners_count":17184851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apple","dynamic-island","ios","nextjs","react"],"created_at":"2024-08-03T22:01:08.604Z","updated_at":"2024-11-08T11:40:13.244Z","avatar_url":"https://github.com/nanxiaobei.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\nLink in bio to **widgets**,\nyour online **home screen**. ➫ [🔗 kee.so](https://kee.so/)\n\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n# react-live-island\n\n**by [🐤 kee.so](https://kee.so/)**\n\nDynamic Island 🏝 for ⚛️ React\n\n[![npm](https://img.shields.io/npm/v/react-live-island.svg?style=flat-square)](https://www.npmjs.com/package/react-live-island)\n[![npm](https://img.shields.io/npm/dt/react-live-island?style=flat-square)](https://www.npmtrends.com/react-live-island)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-live-island?style=flat-square)](https://bundlephobia.com/result?p=react-live-island)\n[![GitHub](https://img.shields.io/github/license/nanxiaobei/react-live-island?style=flat-square)](https://github.com/nanxiaobei/react-live-island/blob/main/LICENSE)\n[![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)\n\n\u003c/div\u003e\n\n## Install\n\n```sh\npnpm add react-live-island\n# or\nyarn add react-live-island\n# or\nnpm i react-live-island\n```\n\n## Usage\n\n```jsx\nimport LiveIsland from 'react-live-island';\n\nconst Demo = () =\u003e {\n  return \u003cLiveIsland\u003e{(isSmall) =\u003e (isSmall ? 'small' : 'large')}\u003c/LiveIsland\u003e;\n};\n```\n\n[![Edit react-live-island](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-live-island-dzkl96?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## Props\n\n| Prop               | Type                              | Default   | Description                                   |\n| ------------------ | --------------------------------- | --------- | --------------------------------------------- |\n| `className`        | `string`                          | `''`      | Class name of the island                      |\n| `top`              | `number\\|string`                  | `10`      | Top egde of the island                        |\n| `smallClassName`   | `string`                          | `''`      | Class name of the **small** island            |\n| `smallWidth`       | `number\\|string`                  | `96`      | Width of the **small** island                 |\n| `smallHeight`      | `number\\|string`                  | `30`      | Height of the **small** island                |\n| `largeClassName`   | `string`                          | `''`      | Class name of the **large** island            |\n| `largeWidth`       | `number\\|string`                  | `400`     | Width of the **large** island                 |\n| `largeHeight`      | `number\\|string`                  | `180`     | Height of the **large** island                |\n| `largeRadius`      | `number\\|string`                  | `36`      | Border radius of the **large** island         |\n| `wrapperClassName` | `string`                          | `''`      | Class name of the whole container             |\n| `triggerType`      | `'click'\\|'hover'`                | `'click'` | Trigger mode for open                         |\n| `initialAnimation` | `boolean`                         | `false`   | Whether show animiation on enter              |\n| `onChange`         | `(isSmall: boolean) =\u003e void`      | -         | Call when the island open \u0026 close             |\n| `children`         | `(isSmall: boolean) =\u003e ReactNode` | -         | Render funtion to define the island's content |\n\n## License\n\n[MIT License](https://github.com/nanxiaobei/react-live-island/blob/main/LICENSE) (c) [nanxiaobei](https://lee.so/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnanxiaobei%2Freact-live-island","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnanxiaobei%2Freact-live-island","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnanxiaobei%2Freact-live-island/lists"}