React ios corners

Create ios like rounded corners (squircle). Comparsion with regular border radius:

Playing with different 'roundness' setting, you can achieve look similar to iOS home screen app icons etc.

Links

https://en.wikipedia.org/wiki/Squircle

https://medium.com/minimal-notes/rounded-corners-in-the-apple-ecosystem-1b3f45e18fcc (Highly recommending!)

Usage

1import { Squircle } from 'react-ios-corners';
2
3function MyComponent() {
4  return <Squircle>Hello</Squircle>;
5}

Properties

1export interface SquircleProps {
2  radius?: number | 'auto';
3  roundness?: number; // 0-1
4}

It also accept any div property and passes it to the holder.

Note: box-shadow will not be visible because under the hood squircle is based on css masks.