Newbie Paintball Master


    0.0.6 • Public • Published


    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

    Demo Status on Netlify

    Netlify Status

    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()

    Stargazers repo roster for @atapas/react-clip-path

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


    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.

        handleClick={() => 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,

      '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.

    🏷️ License

    Copyright © 2021 by Tapas Adhikary

    This project is licensed under MIT license.


    npm i react-clip-path

    DownloadsWeekly Downloads






    Unpacked Size

    19.6 kB

    Total Files


    Last publish


    • atapas
    • williamzhu17