https://github.com/pie6k/react-ios-corners

iOS like border-radius corners react component
https://github.com/pie6k/react-ios-corners

corners ios radius react squircle

Last synced: 17 days ago
JSON representation

iOS like border-radius corners react component

• Host: GitHub
• URL: https://github.com/pie6k/react-ios-corners
• Owner: pie6k
• License: mit
• Created: 2020-11-17T21:24:54.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2020-11-17T21:48:00.000Z (almost 4 years ago)
• Last Synced: 2024-10-12T13:14:43.119Z (about 1 month ago)
• Topics: corners, ios, radius, react, squircle
• Language: TypeScript
• Homepage: https://pie6k.github.io/react-ios-corners/
• Size: 1.39 MB
• Stars: 249
• Watchers: 2
• Forks: 7
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## React ios corners

demo - https://pie6k.github.io/react-ios-corners/

![Demo gif](demo.gif)

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

![Demo gif](demo-2.png)

![Demo gif](demo-3.png)

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

```tsx

import { Squircle } from 'react-ios-corners';

function MyComponent() {

  return Hello;

}

```

## Properties

```ts

export interface SquircleProps {

  radius?: number | 'auto';

  roundness?: number; // 0-1

}

```

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.