react-superellipse
TypeScript icon, indicating that this package has built-in type declarations

0.0.6 • Public • Published

react-superellipse npm version

example

What is this?

React component for create Superellipse (or Squircle) mask using svg and css mask-image attribute.

iOS app icon is Squircle and KakaoTalk profile is Superellipse shape.

example

import SuperEllipse from "react-superellipse";
 
<SuperEllipse r1={0.2} r2={0.5} style={{width: 64, height: 64}}>
    {/* children */}
</SuperEllipse>
 
<SuperEllipse p1={10} p2={32} style={{width: 64, height: 64}}>
    {/* children */}
</SuperEllipse>
 
 
// or using preset
 
import {Preset} from "react-superellipse";
// preset for iOS squircle or Kakaotalk superellipse
 
<SuperEllipse r1={Preset.iOS.r1} r2={Preset.iOS.r2} style={{width: 64, height: 64}}>
    {/* children */}
</SuperEllipse>

component

SuperEllipse

Wrapper div component

interface SuperEllipseProps {
    style?: CSSProperties;
    r1?: number; // [0 ~ 0.5] width ratio
    r2?: number; // [0 ~ 0.5] width ratio
    p1?: number; // [0 ~ width/2] in pixel
    p2?: number; // [0 ~ width/2] in pixel
}

r1,r2 or p1,p2

SuperEllipseImg

export interface SuperEllipseImgProps {
    width: number;
    height: number;
    href: string;
    style?: CSSProperties;
    r1?: number;
    r2?: number;
    backgroundColor?: string;
    strokeColor?: string;
    strokeWidth?: number;
}

Package Sidebar

Install

npm i react-superellipse

Weekly Downloads

225

Version

0.0.6

License

MIT

Unpacked Size

12.5 kB

Total Files

9

Last publish

Collaborators

  • flask