{"id":29834959,"url":"https://github.com/kenmori/corner-islands","last_synced_at":"2026-02-19T18:31:09.141Z","repository":{"id":253471914,"uuid":"843603997","full_name":"kenmori/corner-islands","owner":"kenmori","description":"corner-islands is a lightweight utility for dynamically determining the border-radius and other styles of connected elements in a sequence.","archived":false,"fork":false,"pushed_at":"2024-11-16T00:42:03.000Z","size":164,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-24T11:45:05.416Z","etag":null,"topics":["border-radius","css","react","typescript"],"latest_commit_sha":null,"homepage":"https://kenjimorita.jp/npm-library-kenmori-corner-islands-publish/","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/kenmori.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,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-08-16T22:28:37.000Z","updated_at":"2024-08-17T06:22:11.000Z","dependencies_parsed_at":"2025-07-29T12:41:27.088Z","dependency_job_id":null,"html_url":"https://github.com/kenmori/corner-islands","commit_stats":null,"previous_names":["kenmori/corner-islands"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/kenmori/corner-islands","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenmori%2Fcorner-islands","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenmori%2Fcorner-islands/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenmori%2Fcorner-islands/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenmori%2Fcorner-islands/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kenmori","download_url":"https://codeload.github.com/kenmori/corner-islands/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenmori%2Fcorner-islands/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29627111,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T18:02:07.722Z","status":"ssl_error","status_checked_at":"2026-02-19T18:01:46.144Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["border-radius","css","react","typescript"],"created_at":"2025-07-29T12:12:17.880Z","updated_at":"2026-02-19T18:31:09.121Z","avatar_url":"https://github.com/kenmori.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# corner-islands\n\n\u003cimg src=\"https://kenjimorita.jp/wp-content/uploads/2024/08/スクリーンショット-2024-08-17-10.23.19.png\" width=\"600px\" /\u003e\n\ncorner-islands is a lightweight utility for dynamically determining the border-radius and other styles of connected elements in a sequence. By treating groups of elements as \\\"islands,\\\" this package allows you to easily style connected corners, apply custom styles, and manage layout logic based on the relationship between elements. Perfect for React and other UI frameworks where flexible, conditional styling is needed.\n\n## install\n\n```bash\nnpm install corner-islands\n```\n\n\n## API\n\n```js\ngetIsland(fields: { condition: 'And' | 'Or' }[]): (1 | 2 | 3 | 4)[]\n```\n\nRepresents connections between elements as \"islands\" and returns the state of each element as a number.\n\n```text\n1: Independent element (only one island)\n2: Start of an island\n3: Middle of an island\n4: End of an island\n```\n\n## Example\n\n\n`[2, 4, 2, 4]` =\u003e Contains two islands\n\n`[2, 3, 3, 4]` =\u003e One island composed of four elements\n\n`[2, 3, 4, 1]` =\u003e Contains two islands\n\n\n- [stackblitz](https://stackblitz.com/edit/corner-islands?file=README.md)\n\n```ts\nimport { CornerIslands } from 'corner-islands';\n\nconst cornerIslands = new CornerIslands();\n\nconst fields = [\n  { condition: 'And' },\n  { condition: 'And' },\n  { condition: 'Or' },\n  { condition: 'And' }\n];\n\nconst result = cornerIslands.getIsland(fields);\nconsole.log(result); // [2, 3, 4, 1]\n```\n\nif you using react\n\n```tsx\nconst conditions = [{ condition: 'And' as const }];\nconst landsByOne = new CornerIslands().getIsland(conditions);\n.\n.\n.\n\u003cSettings\u003e\n  {conditions.map((_, i) =\u003e {\n    return (\n      \u003cLand land={landsByOne[i]}\u003e\n        \u003cConditionText\u003e{i + 1}\u003c/ConditionText\u003e\n      \u003c/Land\u003e\n  );\n  })}\n\u003c/Settings\u003e\n\n//// style (ex: styled-components)\nconst Land = styled.div\u003c{ land: 1 | 2 | 3 | 4 }\u003e`\n  padding: 8px 12px;\n  font-weight: bold;\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  border-radius: ${({ land }) =\u003e\n    land === 1\n      ? '6px'\n      : land === 2\n      ? '6px 0 0 6px'\n      : land === 3\n      ? '0'\n      : land === 4\n      ? '0 6px 6px 0'\n      : '0'};\n  background: ${({ land }) =\u003e (land ? '#47cd47' : '#fff')}\n`;\n```\n\n## License\n\nMIT License\n\n## Contributing\n\nIssues and pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\n## Author\n\n[@kenmori](https://x.com/terrace_tech)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenmori%2Fcorner-islands","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkenmori%2Fcorner-islands","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenmori%2Fcorner-islands/lists"}