react-clip-path is a simple React-based package to create shapes declaratively using CSS clip-path property.
MIT License
react-clip-path
is a React-based open-source project to create shapes declaratively using CSS
clip-path property. It is available as NPM to download and install.
You may need react-clip-path
when,
A Live demo of the component is available here, 💻 CLICK FOR DEMO
Who doesn't need motivations? Please give the repository a star(⭐) to motivate.
Stargazers
who has supported this project with stars(⭐)This section talks about the installation, usages, and configurations. Make sure you have Node.js(version 12.7.0 or higher) installed.
To install, use the following command from your command prompt,
npm install react-clip-path
# Alternatively using yarn
yarn add react-clip-path
Next is to import the component from the library.
First import the Shape
component,
import Shape from 'react-clip-path';
After import, we can now use it in any React component.
<Shape
name="Circle"
id="circle-shape-id"
width="300px"
height="300px"
showLabel={true}
showShadow={true}
handleClick={() => someFunction()}
/>
This section provides details about the properties(props).
The react-clip-path
depends on a schema
file to get the shape information. You can extend the schema by introducing a new shape definition. Shape information contains,
Here is an example of the circle
shape in the schema file,
{
'name': 'Circle',
'type': 'circle',
'formula': 'circle(50% at 50% 50%)',
'vertices': 0,
'edges': 0,
'notes': 'A circle is a round shaped figure that has no corners or edges. In geometry, a circle can be defined as a closed, two-dimensional curved shape.'
}
The same schema file also contains a few utility methods. You can import them as,
import { getShape } from 'react-clip-path/schema';
getShape('Circle'); // returns the details of the Circle shape.
Copyright © 2021 by Tapas Adhikary
This project is licensed under MIT license.