πŸŒ€ Insert Awesome Shapes into Your React Site with Ease.

Overview
preview

Getting Started with React Awesome Shapes

If you are trying to use this project for the first time, you can get up and running by following these steps.

Clone the project. This will download the GitHub respository files onto your local machine.

git clone https://github.com/ashutosh1919/react-awesome-shapes.git

Install the project dependencies

npm install

Start the development server on localhost:3000

npm start

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Ashutosh Hathidara

πŸ’» 🎨 πŸ“– πŸ€” 🚧 πŸ”¬

Sachin Chaurasiya

πŸ“– πŸ’» πŸ€” πŸ“¦

Mohit Khairnar

πŸ€” πŸ’» 🎨

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

Comments
  • diamond to square

    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! Screenshot 2022-03-02 at 7 58 53 PM

    Screenshot 2022-03-02 at 7 58 26 PM Screenshot 2022-03-02 at 7 58 21 PM bug 
    opened by Spyware007 9
  • Fix #2 Getting Error for

    Fix #2 Getting Error for "useMediaQuery" being called in loop.

    Fixes #2 This PR will include the following changes

    • Adding types package for react-responsive
    • Fixing Hook being called in loop issue.

    cc: @ashutosh1919

    opened by Sachin-chaurasiya 7
  • Getting Error for

    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.

    enhancement 
    opened by Sachin-chaurasiya 5
  • Fix: issue-45 diamond to square

    Fix: issue-45 diamond to square

    I work on fixing issue #45 which converts diamond shape in to square shape on animation. Closes #45

    Working example:- Please look right top corner for diamond shape

    https://user-images.githubusercontent.com/71748675/158029836-3b14c96e-202a-4159-9eba-70326f7e4a66.mov

    @Sachin-chaurasiya @Spyware007 @ashutosh1919

    opened by ShaileshParmar11 4
  • Move out all the typescript types in single file.

    Move out all the typescript types in single file.

    Currently, we have typescript types in all the files, we should move out those and keep them in a single file and use it from there. Also, instead of type make it interface.

    enhancement good first issue 
    opened by Sachin-chaurasiya 2
  • fix onHover issue

    fix onHover issue

    #85 Hi there I was working on this issue and I found out that to fix it I have to make some changes:

    those changes will affect the homepage shapes positions so please don't merge until repositioned the shapes

    1. Remove some css properties from StyledShape component [ position, top, bottom, left, & right] which inherit their values from the parent (BaseShape).
    2. Set zIndex value to unset instead of -1.
    3. Remove className property from BaseShape component.
    4. Add css property of type string to all shapes, this property is responsible for adding effects to a component like changing color on hover.
     <Heart
              color="red"
              css={`
                &:hover {
                  background: orange;
                }
                transition: 0.5s;
              `}
              position="initial"
              size="200px"
            />
    

    Please keep in mind that to change the color of Donut you have to change the border-color property and for CircleGrid you have to change the fill property and not the background.

    For example:

    <CircleGrid
              color="green"
              css={`
                &:hover {
                  fill: orange;
                }
              `}
              position="initial"
              size="100px"
            />
    
    <Donut
              color="yellow"
              css={`
                &:hover {
                  border-color: orange;
                }
              `}
              position="initial"
              size="100px"
              width="20px"
            />
    
    blocked 
    opened by essofyany 3
  • onHover the square background appears to change color

    onHover the square background appears to change color

    When I tried to use a simple color-changing effect on any shape the background container of the shape also changes color. I am trying to make an effect on hover to change the color!

    https://user-images.githubusercontent.com/89961974/159887373-b76381d0-22da-487c-96bd-9a9fed014105.mov

    Screenshot 2022-03-24 at 3 08 20 PM
    opened by Spyware007 2
  • Add Unit Tests for components

    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

    enhancement 
    opened by Sachin-chaurasiya 4
  • Remove react-responsive

    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.

    enhancement 
    opened by ashutosh1919 1
  • Pass props to animate the shapes

    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!

    enhancement 
    opened by Spyware007 3
Releases(v0.1.12)
Owner
Ashutosh Hathidara
❀️ TensorFlow, Python, ReactJS, GatsbyJS. Love to work on the end-to-end project which includes cross-framework implementations.
Ashutosh Hathidara
convert your document or sentences to audio with ease

2aud.io v2 convert your document or sentences to audio with ease. ⚠️ The badges below will be add later (I just make it like this to look more beautif

null 1 Dec 17, 2022
Neoo: a Web3 Blockchain application that aims to ease crypto transactions between digital wallets

Neoo Neoo is a Web3 Blockchain application that aims to ease crypto transactions

Sayan Mondal 4 Aug 11, 2022
An opensource platform to connect with awesome collaborators to work with your side-projects✨

ProStack ?? An open-source platform ?? to peep into some highly interesting and exciting projects & connect with those project's owner for collaborati

Parth Pandya 6 Jul 18, 2022
kbar is a simple plug-n-play React component to add a fast, portable, and extensible command+k interface to your site.

kbar is a simple plug-n-play React component to add a fast, portable, and extensible command+k interface to your site.

Tim 3.6k Jan 5, 2023
This is a complete news application having some awesome AI tool like Alan AI and use advance React concepts.

News AI Live_Site Setup to use and run it. You have to install following dependencies npm install npm i @material-ui/core @alan-ai/alan-sdk-web classn

Muhammad Awais 2 Oct 7, 2021
Build a Stunning Portfolio with React JS using Styled-Components and framer-motion for awesome Animations

Build a Stunning Portfolio with React JS using Styled-Components and framer-motion for awesome Animations This repository contains Final code for The

CodeBucks 173 Dec 25, 2022
A suite of libraries for making game development with Three.js and React not only awesome

A suite of libraries for making game development with Three.js and React not only awesome, but so good, it would feel wrong to use anything else.

Hendrik Mans 282 Dec 31, 2022
The Bookstore is a website similar to the "Awesome Books" website already built with JavaScript

The Bookstore is a website similar to the "Awesome Books" website already built with JavaScript. It allows you to: Display a list of books. Add a book. Remove a selected book. By building this application, I learned how to use React and Redux.

Hamza Ellaouzi 8 Oct 29, 2021
Bookstore - a website similar to the Awesome Books website built in the previous module

The Bookstore is a website similar to the Awesome Books website built in the previous module. This MVP version allows you to: Display a list of books. Add a book. Remove a selected book. It is built with React, Redux, Javascript and CSS.

Chia Carlyle 4 Oct 4, 2022
The Bookstore is a website similar to the "Awesome Books" website built in the previous module.

The Bookstore is a website similar to the "Awesome Books" website built in the previous module.

Amrendra K 4 Jun 3, 2022
Your window into the Elastic Stack

Kibana Kibana is your window into the Elastic Stack. Specifically, it's a browser-based analytics and search dashboard for Elasticsearch. Getting Star

elastic 18.1k Jan 6, 2023
Aura, an easy to use mood tracking app that takes your daily life's mood into account.

Aura, an easy to use mood tracking app that takes your daily life's mood into account. It allows you to understand yourself better and helps you maintain an even mood throughout the day. The app has various features such as graphs, statistics, insights, and relaxing sounds to improve you mood.

Abhinav Rajesh 34 Dec 22, 2022
✨ An IRL tokenization platform to turn your hopes, dreams, and desires into fundable NFTs on the Polygon blockchain using Chainlink, IPFS, Moralis, and NFT.Storage.

✨ An IRL tokenization platform to turn your hopes, dreams, and desires into fundable NFTs on the Polygon blockchain using Chainlink, IPFS, Moralis, and NFT.Storage.

Brian H. Hough | brianhuff.eth 7 Dec 6, 2022
A set of packages that helps you integrate the Glow Solana Wallet into your dApp

Glow JS This is a set of packages that helps you integrate the Glow Solana Wallet into your dApp. ?? Video Overview Packages Here is a set of packages

Glow 25 Dec 5, 2022
A static site generator powered by Deno + React

A static site generator powered by Deno + React

xcatliu 1.5k Jan 2, 2023
IMDb demo site built with React

IMDb Clone Demo - https://imdb-react-clone.herokuapp.com/ This React project is a simplified front-end version of the IMDb website. It uses The MovieD

Dilpreet Johal 26 Sep 2, 2022
A demo of a Shopify site using Astro and React.

A demo of a Shopify site using Astro and React.

Cassidy Williams 98 Jan 8, 2023
Primeiro projeto de e-commerce feito na Labenu. A proposta era criar um site de e-Commerce com os recursos React.js.

Primeiro projeto de e-commerce feito na Labenu. A proposta era criar um site de e-Commerce com os recursos React.js.

Joana 9 Oct 30, 2022
Recriando o site da Tesla com React, TypeScript e Framer Motion

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Fabricio de Lima Costa 1 Jan 7, 2022