React Awesome Shapes

🌀 Insert Awesome Shapes into Your React Site with Ease.

Loved the project? Please consider donating to help it improve!

Consider following DevSense on YouTube.

If you want to discuss about something, then you can ask on official Discord Server.

⭐ Star us on GitHub — it helps!

Getting Started 🎬

The easiest way to use one of the shapes from Awesome Shapes is to install the NPM package and import the particular shape to use it.

Install NPM Package

npm install react-awesome-shapes

Import And Use

import { ShapeName } from "react-awesome-shapes";
...
function ShapeComponent(props) {
    return (
        ...
        <ShapeName {...passParametersToCustomise} />
        ...
    );
}

export default ShapeComponent;

The shapes are very easier to import and use wherever you want and in any web framework that uses NPM.
You can set different sizes of different variety of shapes by passing props.

Read the complete in detail documentation in the Usage section.

Usage

Currently, the package contains shapes: Circle, Donut, CircleGrid, Diamond, PolygonCard, Polygon, Star, Cross, Heart, SquareDonut, Arrow, Message.

All of the shapes currently present in the package are made responsive and the responsiveness is customisable too. To do that, one of the prop to each shape component is breakpoints which is an array of numbers. It represents the breakpoints in which you will define the responsiveness. By default, breakpoints are defined as [600, 900, 1200]. So, you can pass array of 4 elements for size prop which corresponds to <=600, 600<size<=900, 900<size<=1200, >1200. Similarly, you can pass other props in form of array if you want to define different sizes for different breakpoints. You can see list of props corresponding to each shape in the respective implementation file linked above with shape.

By default, all the shapes have position: absolute; so that you can define the coordinates to put the shapes to exact position. But you can change the position attribute in case you want.

Basic usage of the Shape in your react site is illustrated on the project website.

License 📄

This project is licensed under the MIT License - see the LICENSE.md file for details. You can use this project for personal as well as commercial purposes. But if you think you have modified the project and built something really good, we will humbly request you to raise the pull request and share with the opensource community.

Contributing 💡

‌Awesome Shapes is created with the help of what is available for free on the internet and hence it will always be available for free. This makes it an open source project and everyone are welcome to contribute to different aspects of the project.

You may want to contribute on adding new shapes, fixing bugs, improving/refactoring code etc.

If you can help us with these, please don't hesitate to open a pull request or an issue. If you want to know about how to create pull request, then please refer to this youtube playlist.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Ashutosh Hathidara 💻 🎨 📖 🤔 🚧 🔬	Sachin Chaurasiya 📖 💻 🤔 📦	Mohit Khairnar 🤔 💻 🎨 📖	anaghaachakrapani 🎨 🤔	Aman Sethi 💻
judy-n 💻	Julien Bertazzo Lambert 💻	OM GAWANDE 💻 🤔	Shailesh Parmar 💻	sskanishk 💻
Jude 📖	Bilal Essofyany 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

References 👏🏻

Gatsby Themes by @LekoArts was the biggest inspiration for this project.