https://github.com/kenmori/corner-islands
corner-islands is a lightweight utility for dynamically determining the border-radius and other styles of connected elements in a sequence.
https://github.com/kenmori/corner-islands
border-radius css react typescript
Last synced: 4 months ago
JSON representation
corner-islands is a lightweight utility for dynamically determining the border-radius and other styles of connected elements in a sequence.
- Host: GitHub
- URL: https://github.com/kenmori/corner-islands
- Owner: kenmori
- License: mit
- Created: 2024-08-16T22:28:37.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-16T00:42:03.000Z (over 1 year ago)
- Last Synced: 2025-10-24T11:45:05.416Z (8 months ago)
- Topics: border-radius, css, react, typescript
- Language: TypeScript
- Homepage: https://kenjimorita.jp/npm-library-kenmori-corner-islands-publish/
- Size: 160 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# corner-islands
corner-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.
## install
```bash
npm install corner-islands
```
## API
```js
getIsland(fields: { condition: 'And' | 'Or' }[]): (1 | 2 | 3 | 4)[]
```
Represents connections between elements as "islands" and returns the state of each element as a number.
```text
1: Independent element (only one island)
2: Start of an island
3: Middle of an island
4: End of an island
```
## Example
`[2, 4, 2, 4]` => Contains two islands
`[2, 3, 3, 4]` => One island composed of four elements
`[2, 3, 4, 1]` => Contains two islands
- [stackblitz](https://stackblitz.com/edit/corner-islands?file=README.md)
```ts
import { CornerIslands } from 'corner-islands';
const cornerIslands = new CornerIslands();
const fields = [
{ condition: 'And' },
{ condition: 'And' },
{ condition: 'Or' },
{ condition: 'And' }
];
const result = cornerIslands.getIsland(fields);
console.log(result); // [2, 3, 4, 1]
```
if you using react
```tsx
const conditions = [{ condition: 'And' as const }];
const landsByOne = new CornerIslands().getIsland(conditions);
.
.
.
{conditions.map((_, i) => {
return (
{i + 1}
);
})}
//// style (ex: styled-components)
const Land = styled.div<{ land: 1 | 2 | 3 | 4 }>`
padding: 8px 12px;
font-weight: bold;
align-items: center;
display: flex;
justify-content: center;
border-radius: ${({ land }) =>
land === 1
? '6px'
: land === 2
? '6px 0 0 6px'
: land === 3
? '0'
: land === 4
? '0 6px 6px 0'
: '0'};
background: ${({ land }) => (land ? '#47cd47' : '#fff')}
`;
```
## License
MIT License
## Contributing
Issues and pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
## Author
[@kenmori](https://x.com/terrace_tech)