https://github.com/atapas/react-clip-path
react-clip-path is a simple React-based package to create shapes declaratively using CSS clip-path property.
https://github.com/atapas/react-clip-path
clip-path css css3 react reactjs
Last synced: over 1 year ago
JSON representation
react-clip-path is a simple React-based package to create shapes declaratively using CSS clip-path property.
- Host: GitHub
- URL: https://github.com/atapas/react-clip-path
- Owner: atapas
- License: mit
- Created: 2021-03-29T06:54:38.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-05-25T04:09:13.000Z (about 4 years ago)
- Last Synced: 2025-03-26T13:03:18.603Z (over 1 year ago)
- Topics: clip-path, css, css3, react, reactjs
- Language: JavaScript
- Homepage: https://tapasadhikary.com
- Size: 451 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-clip-path
`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.
# 🔥 Why do you need this?
You may need `react-clip-path` when,
- You need to show lightweight shapes in your React app.
- You may not want to rely on any external graph or chart libraries to create shapes.
- You may want to create some custom shapes using a polygon, paths, etc.
- You need to create shapes declaratively by extending the out-of-the-box schema.
# 💻 Live Demo
A Live demo of the component is available here, 💻 [CLICK FOR DEMO](https://react-clip-path.netlify.app/)
## Demo Status on Netlify
[](https://app.netlify.com/sites/react-clip-path/deploys)
# ⭐ Want to Motivate?
Who doesn't need motivations? Please give the repository a star(⭐) to motivate.
## Many Thanks to all the `Stargazers` who has supported this project with stars(⭐)
[](https://github.com/atapas/react-clip-path/stargazers)
# ⚒️ How to use?
This section talks about the installation, usages, and configurations. Make sure you have Node.js(version 12.7.0 or higher) installed.
## Install
To install, use the following command from your command prompt,
```shell
npm install react-clip-path
# Alternatively using yarn
yarn add react-clip-path
```
## Import
Next is to import the component from the library.
First import the `Shape` component,
```js
import Shape from 'react-clip-path';
```
## Usage
After import, we can now use it in any React component.
```js
someFunction()}
/>
```
### Properties & Configuration
This section provides details about the properties(props).
Component Properties:
Property
Description
Required
Example
id
The unique identifier of the shape
Yes
Please pass any unique string as id.
name
The Shape Name
Yes
Supported Shapes(out-of-the-box) are, Circle, Square, Rectangle, Rhombus, Ellipse, Triangle, Parallelogram, Trapezoid, Pentagon, Hexagon, Heptagon, Octagon, Nonagon, Decagon, Cross, Star, Tag.
formula
The shape's clip-path formula. Please pass a CSS clip-path value using inset, circle, ellipse, polygon
Yes - It is required if name is not passed.
- circle(50% at 50% 50%)
- polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%)
backgroundColor
The color of the shape
No
Any valid hex color code or rgb color code. The default color code is, #12a8d6.
height
The height of the shape
No
The default value is 100px.
width
The width of the shape
No
The default value is 100px.
showShadow
pass true if you want to show outside part of the clipped area.
No
false
text
Any text label about the shape
No
The label of the shape.
showLabel
Show the text label if true.
No
true
handleClick
Pass a function to call when user clicks on the shape.
No
handleClick={() => someFunction()}
# Schema & Extending it
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,
- name of the shape
- shape type
- clip-path code of the shape
- number of vertices
- number of edges
- Any optional notes about the shape.
Here is an example of the `circle` shape in the schema file,
```js
{
'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,
```js
import { getShape } from 'react-clip-path/schema';
getShape('Circle'); // returns the details of the Circle shape.
```
# 🏷️ License
Copyright © 2021 by [Tapas Adhikary](https://tapasadhikary.com/)
This project is licensed under MIT license.