Coolshapes

A simple, fun project for the sake of creating some cool-looking abstract shapes with little grainy gradients crafted by @realvjy. Coolshapes is a completely open-source set of 100+ abstract shapes crafted for any design and development projects. Free for both commercial and personal use. Licensed under MIT.

Coolshapes

Installation

npm install coolshapes-react

yarn add coolshapes-react

How to use

There are two types of components available in Coolshapes, which you can use: Global component and Component with a category of shapes. Then, you can pass additional props to adjust the shapes and their properties available on Coolshapes SVG elements.

Global component example

Just import the Global component Coolshape and it will work.

import { Coolshape } from "coolshapes-react";

const App = () => {
  return <Coolshape type="star" index={0} size={48} noise={true} />;
};

export default App;

Component with shape category example

You can import the component for specific category - Star,Ellipse... etc - and simply pass the index of the shape.

import { Star } from "coolshapes-react";

const App = () => {
  return <Star index={0} size={48} />;
};

export default App;

Generating random shapes

setting the random prop to true or leaving the index or type prop empty would replace the shape with a random shape every time it renders.

// renders a random shape from any category
const Component = () => {
  return <Coolshape random={true} />;
};
// renders a shape from the category star
const Component2 = () => {
  return <Coolshape type="star" random={true} />;
};

Using random shape function

import { getRandomShape } from "coolshapes-react";

getRandomShape(); // returns a random shape component

getRandomShape({ type: "ellipse" }); // returns a random shape component from the category ellipse

getRandomShape({ onlyId: true }); // returns shape identifier that can passed as props to the shape component
// {shapeType, index}

getRandomShape({ onlyId: true, type: "star" }); // returns shape identifier that can passed as props to the shape component
// {shapeType: "star", index}

Other Methods

All the components are mapped from object that we have given you access to

const shapes = {
  star: [Star1, Star2, ...],
  ellipse: [Ellipse1, Ellipse2, ...],
  ...
}

Renders the shapes from all catagories

import { shapes } from "coolshapes-react";

const ShapeGrid = () => {
  return (
    <>
      {Object.keys(shapes).map((shapeType, _) => {
        return shapes[shapeType].map((Shape, index) => {
          return <Shape size={48} />;
        });
      })}
    </>
  );
};

syntax

shapes[type][index];

const starComponents = shapes["star"];
const StarComponent1 = starComponents[0];

Props

name	data type	default	description
`size`	Number	200	The dimension of shape
`type`	String	random	The category of shapes, if left empty it would randomly select a category.
`noise`	Boolean	true	Whether to add noise to the shape or not.
`index`	Number	random	The index of shape within the shape category, it will randomly select a shape from the category if type prop given. Start from 0.
`random`	Boolean	false	If set true it would select a random component

Notes: Index starts from number 0, so if you want to retrive the first shape of any category, you would use the index number 0.

name	count
`star`	13
`triangle`	14
`moon`	15
`polygon`	8
`flower`	16
`rectangle`	9
`ellipse`	12
`wheel`	7
`misc`	11
`number`	10

Others

There are umd and es included in bundled version of the module,

cjs

const Coolshapes = require("coolshapes-react");

using with react in the browser

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/coolshapes-react/dist/umd/coolshapes.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const domContainer = document.querySelector("#root");
      const root = ReactDOM.createRoot(domContainer);
      const coolshapes = window.coolshapes;
      const Coolshape = coolshapes.Coolshape;
      root.render(<Coolshape />);
    </script>
  </body>
</html>

Figma File

Figma file coming soon on community

Contributing

Created by realvjy. You are always welcome to share your feedback on twitter or any social media platform.

If you want to contribute. Just create a pull request.

Support & Donation

Coffee fuels coding ☕️

zafran9x / coolshapes-react Goto Github PK

coolshapes-react's Introduction

Coolshapes

Table of Contents