Skip to content

Latest commit

 

History

History
269 lines (207 loc) · 8.45 KB

README.md

File metadata and controls

269 lines (207 loc) · 8.45 KB
Raw

Coolshapes

Coolshapes

license npm package

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.

Table of Contents

Installation

npm install coolshapes-react

or

yarn add coolshapes-react

How to use

There are two types of components available in Coolshapes, which you can use: Global component and Component for each category of shapes. and, you can pass additional props to adjust the shapes.

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 categories

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 will 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 would randomly select a shape from the category if type prop given. index starts from 0.
random Boolean false If set true it will select a random component

notes

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

The shapes are SVG components behind the hood, so it's also supports all the props that can be passed in a svg element.

Categories

There are a total of 115 shapes available in Coolshapes under the following categories.

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

Note: While passing the category name in the component, the name will be in lower case.

Others

ClassNames and css

all the components have classname coolshapes assigned as default, but you can also pass custom classname of yours.

import { Star } from 'coolshapes-react';

export const Shape = () => {
  return(
    <Star className={"myshape"}/>
  )
}
// make the shapes size responsive similar to img elements.
.coolshapes{
  width: 100%;
  max-height: 48px;
}

Builds

We have given umd, es and cjs versions of the build.

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>
unpkg
https://unpkg.com/coolshapes-react/dist/umd/coolshapes.js

Figma File

Grab it from Figma Community

Credits

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

  • Noisy Gradients Plugin - Some of the gradients generated using Noisy Gradients Figma plugin

Contributing

If you want to contribute, create a pull request.

Support & Donation

Coffee fuels design & coding ☕️

Buy Me A Coffee