ashutosh1919 / react-awesome-shapes Goto Github PK

View Code? Open in Web Editor NEW

628.0 4.0 39.0 857 KB

🌀 Insert Awesome Shapes into Your React Site with Ease.

Home Page: https://awesomeshapes.netlify.app

License: MIT License

HTML 2.70% CSS 0.46% TypeScript 93.78% Shell 0.09% JavaScript 2.97%

shapes circle donut react-shapes react-awesome-shapes best-react-package ui-pack

react-awesome-shapes's Introduction

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.

react-awesome-shapes's People

Contributors

Stargazers

Watchers

react-awesome-shapes's Issues

Remove Triangle, Square and Hexagon

Since we now have Polygon as generalized shape, we can remove Triangle, Square and Hexagon since they are not adding much to the project.

Add different type of shapes

By referencing this issue, you can mentioned it in your PR for newly introduced shapes

Refactor folder structure and rename some files.

Currently, we have a basic folder structure and we are adding every component to the component folder. We need to separate common and layout components into separate folders.
Also, we need to rename some files and change the file extension according to what value the file contains.

Getting Error for "useMediaQuery" being called in loop.

React Hook "useMediaQuery" may be executed more than once. Possibly because it is called in a loop. React Hooks must be called in the exact same order in every component render

@ashutosh1919 , please assign this to me.

Update README.md to a well-designed and informative format

Deploying current version of web app to Netlify

Publish NPM package for the project

Try getting the name react-awesome-shapes.

Cross Shape

I can add a cross (X) shape.
Please Assign it to me!

React-Live integration to show editable code snippets on the website

Code from react-live repository itself is very useful in taking the design inspiration from:
https://github.com/FormidableLabs/react-live/blob/master/demo/pages/index.js

Decouple Web app & Package

As of now, we have a single package.json file which is used both by NPM package and website. There are some heavy packages like react-live which are not used by NPM package but still contained in the final package build and thus increasing its size. We want to decouple both the things to make it lighter.

diamond to square

I am trying to use the diamond shape but it's converted into a square. Actually, I am using className prop on the component for adding some cool animations.
It stays for some time as a diamond and then it jumps back to square as shown in the image below!

Adding Anaghaa as a contributor for design

Adding @anaghaachakrapani as contributor.

Test issue to check Webhook integration with discord bot

On creating this issue, it should create a push notification to the discord channel react-awesome-shapes.

FavIcon not showing in the deployed website

Pass props to animate the shapes

We can create an directory of animations which will contains CSS animations which can be added to any shape by passing the appropriate props names to the shape component!

Message Shape

can add message box kind of shape.
pls assign to me!

Code CleanUp and Refactoring

This issue will use to track code cleanup and code refactoring

Remove commented code
Move out the constant to constant file

cc : @ashutosh1919

Add CI to check for linting issues.

We have added a commit hook to catch and fix issues like

Code formatting
Code Smells
Unwanted codes

We should also add CI to check for linting issues on every PR and commit.

Getting overflow scroll on some contents of the page

Browser: Brave browser v1.136

Add different varieties of shapes

Polygon shape

We could include a general polygon shape where a sides=(3-10) prop would determine the number of sides. Based on that prop users would see
3-triangle
4-square
5-pentagon
...

Add engines node in the package.json

As our project is OpenSource and different people with different platforms will contribute to the project. they will have different npm and node versions. whenever they will install the dependencies package-lock.json will change because of different npm versions, we can prevent this behaviour by adding the engines node in the package.json file.

PS: This only advises the user to use the specified version for this project.

Heart Shape

I can add a heart shape
please assign it to me

Create seperate folder for constants

Creating a seperate folder called shapes/data which will contain all constants related files in that. For example polygonPaths.tsx used for Polygon should be in there. The PR for new Star shape is open and that also have clip-path. In future, we may get many such shape paths that we want to store and storing them in same dir is not good.

Requires an old version of Node

I'm trying to install the lib in my personal project but it seems require a very old node version:

error [email protected]: The engine "node" is incompatible with this module. Expected version "^16.14.0". Got "18.17.0"

Remove unused and unreachable code.

Getting warning for unused and unreachable code.

@ashutosh1919, please assign this to me.

Is it possible to add text inside the shapes?

Remove react-responsive

Currently react-responsive takes 26% of the total size of the package. If we can remove the package, it will greatly reduce the size of the package. The alternative of react-responsive will be to build custom JS code that will check the screen size where it is executing and will select the value from the breakpoint array.

Creating deploy preview workflows

It will help in previewing design & implementation of UI.

Left arrow , Right arrow, Square Frame(like donut) and few more shapes!

I want to add more shapes.
Please assign it to me!

Add Unit Tests for components

Currently, we have 0% test coverage, we should add some unit tests for components so that we can easily debug if something is breaking in components.
cc: @ashutosh1919

ashutosh1919 / react-awesome-shapes Goto Github PK

react-awesome-shapes's Introduction

React Awesome Shapes

🌀 Insert Awesome Shapes into Your React Site with Ease.

Getting Started 🎬

Install NPM Package

Import And Use

Usage

License 📄

Contributing 💡

Contributors ✨

References 👏🏻

react-awesome-shapes's People

Contributors

Stargazers

Watchers

Forkers

react-awesome-shapes's Issues

Recommend Projects

Recommend Topics

Recommend Org