React Clip Path - Make Shapes of Your Choice

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

 

⚒️ 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,

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,

 > import Shape from 'react-clip-path';

Usage

After import, we can now use it in any React component.

<Shape    

type="circle"   

 width="300px"    

height="300px"    

showLabel={true}    

showShadow={true} />

Properties & Configuration

This section provides details about the properties(props).

Component Properties:

 

PropertyDescriptionRequiredExample
typeThe shape typeYesSupported Shape types(out-of-the-box) are, circle, square, rectangle, rhombus, ellipse, triangle, parallelogram, trapezoid, pentagon, hexagon, heptagon, octagon, nonagon, decagon, cross, star.
backgroundColorThe color of the shapeNoAny valid hex color code or rgb color code. The default color code is, #12a8d6.
heightThe height of the shapeNoThe default value is 100px.
widthThe width of the shapeNoThe default value is 100px.
showShadowpass true if you want to show outside part of the clipped area.Nofalse
textAny text label about the shapeNoThe type name of the shape.
showLabelShow the text label if true.Notrue

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.

> The same schema file also contains a few utility methods. You can import them as,

import { getAvailableShapeTypes, getShape } from 'react-clip-path/schema';

🏷️ License

Copyright © 2021 by Tapas Adhikary

This project is licensed under MIT license.

27 Apr 2021


Creating portfolio made simple for

Trusted by 37500+ Generalists. Try it now, free to use

Start making more money