coolshapes-react
Advanced tools
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.
npm install coolshapes-react
or
yarn add coolshapes-react
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.
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;
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;
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} />;
};
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}
All the components are mapped from object that we have given you access to
const shapes = {
star: [Star1, Star2, ...],
ellipse: [Ellipse1, Ellipse2, ...],
...
}
import { shapes } from "coolshapes-react";
const ShapeGrid = () => {
return (
<>
{Object.keys(shapes).map((shapeType, _) => {
return shapes[shapeType].map((Shape, index) => {
return <Shape size={48} />;
});
})}
</>
);
};
shapes[type][index];
const starComponents = shapes["star"];
const StarComponent1 = starComponents[0];
| 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.
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: When importing the components the name would be capitalized, but when passing as prop, the name would be lower case
There are cjs, umd and es included in bundled version of the module,
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 coming soon on community
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.
Coffee fuels coding ☕️
0.0.7-alpha.0
FAQs
A react component library for coolshapes with little grainy gradients.
The npm package coolshapes-react receives a total of 236 weekly downloads. As such, coolshapes-react popularity was classified as not popular.
We found that coolshapes-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.