React Awesome Shapes is a recently released open-source NPM package with which you can insert beautiful shapes into your React site. This seems to be a very small utility and it is a small utility but it has an amazing effect on UI. For example, you can take a look at the project website https://awesomeshapes.netlify.app/. Visualize this website without these shapes. It will be simple and boring but as soon as we insert these shapes, the aesthetics become cool.

Motivation for the Project

I am a big UI design fan and I seek inspiration everywhere to invent something new with UI designs. During Christmas last year, I came across Gatsby Themes by LekoArts who has originally used these shapes in his website. Although the shapes used in it look mind-blowing, they were not scalable and responsive. That is how I decided to create this project so that even beginner React developers can use it and can create awestruck UI.

This project reimplements all the shapes used in Gatsby Themes and adds a few new shapes. Also, we have made implementation scalable and responsive. All our shapes are derived from the BaseShape component which defines scalability and responsiveness behavior.

Usage

The project is available for any (personal or commercial) use through the NPM package. The best way to use the components is to install the package:

npm install react-awesome-shapes

That is all you need to use components. Now, you can import any shape component in your react application and you can use it.

import { Circle } from 'react-awesome-shapes';
...
function ShapeComponent(props) {
    return (
        ...
        <Circle
              color="linear-gradient(135deg, #a5b4fc, #6366f1)"
              size={['150px', '150px', '180px', '180px']}
              zIndex={2}
        />
        ...
    );
}

export default ShapeComponent;

In the above example, you may notice that I am passing 4 values in the size attribute of the component. This is how we handle responsiveness.

Currently, the package contains shapes: Circle, Donut, CircleGrid, Square, Diamond, PolygonCard.

All of the shapes currently present in the package are made responsive and the responsiveness is customizable too. To do that, one of the props 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 an array if you want to define different sizes for different breakpoints. You can see a 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.

Technology Stacks

• ReactJS: JS Framework
• Emotion: CSS in JS package
• React Live: Rendering editable React components
• Netlify: Deploying web app and setting up deploy previews
• Webpack: Bundling modules
• Theme UI: React based theming library

How it will help Developers?

When I started working on shape components, it took me about 15 days to understand the code from Gatsby Themes to implement for my own use case. Now when this project is published, any beginner or expert developer can easily insert these shapes into any React web app with just a few lines of code. Also, the NPM package is very lightweight. So, it will not create any performance issues.

Looking at the creativity and innovation that the open-source front-end community does, the open-source project will grow and more interesting shapes will be added to the project.

Also, we are very delighted to share that the project was trending on GitHub for TypeScript just after a week of release.

Why this blog?

We completed sufficient work on the project to release it to the wider community and coincidently, Hashnode is organizing Netlify Hackathone. We would like our open-source project to participate in this Hackathon.

I myself have worked with Netlify almost in all of my open-source projects including this one. For this project, we have deployed our project web application on Netlify. Also, we have set up deploy previews for incoming pull requests to the project.

I request the reader to star ⭐ the GitHub repository of the project(https://github.com/ashutosh1919/react-awesome-shapes). It will help the project reach a wider audience and many developers will be benefitted from this.

Thank you so much for reading!

I (Ashutosh Hathidara) am an artificial intelligence engineer, full-stack developer, and designer. I can be reached via:
Email: ashutoshhathidara98@gmail.com
Twitter: @ashutosh_1919
Github: @ashutosh1919
Discord: DevSense
LeetCode: @layman_brother