coolshapes-react
Advanced tools
coolshapes-react - npm Package Compare versions
Comparing version 0.1.1-beta.0 to 0.1.2-beta.0
| { | ||
| "name": "coolshapes-react", | ||
| "version": "0.1.1-beta.0", | ||
| "version": "0.1.2-beta.0", | ||
| "description": "A react component library for coolshapes with little grainy gradients.", | ||
@@ -43,3 +43,2 @@ "keywords": [ | ||
| "url": "https://greenapple.one", | ||
| "twitter": "https://x.com/0xgreenapple", | ||
| "email": "0xgreenapple@gmail.com" | ||
@@ -46,0 +45,0 @@ } |
186
README.md
@@ -1,2 +0,2 @@ | ||
| [](https://coolshap.es) | ||
| <a align="center"><img width="100%" src="https://coolshap.es/react-preview.jpg" href="https://coolshap.es"/></a> | ||
@@ -8,6 +8,7 @@ # <p align=center>Coolshapes</p> | ||
| <a href="https://www.npmjs.com/package/coolshapes-react"><img src="https://img.shields.io/npm/v/coolshapes-react" alt="npm package"></a> | ||
| </p> | ||
| A simple, fun project for the sake of creating some cool-looking abstract shapes with little grainy gradients crafted by [@realvjy](https://x.com/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. | ||
| A simple, fun project for the sake of creating some cool-looking abstract shapes with little grainy gradients crafted | ||
| by [@realvjy](https://x.com/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. | ||
@@ -17,19 +18,20 @@ ### Table of Contents | ||
| - [Coolshapes](#coolshapes) | ||
| - [Table of Contents](#table-of-contents) | ||
| - [Installation](#installation) | ||
| - [How to use](#how-to-use) | ||
| - [Global component example](#global-component-example) | ||
| - [Component with shape category example](#component-with-shape-category-example) | ||
| - [Generating random shapes](#generating-random-shapes) | ||
| - [Using random shape function](#using-random-shape-function) | ||
| - [Other Methods](#other-methods) | ||
| - [Renders the shapes from all catagories](#renders-the-shapes-from-all-catagories) | ||
| - [syntax](#syntax) | ||
| - [Props](#props) | ||
| - [Categories](#categories) | ||
| - [Others](#others) | ||
| - [cjs](#cjs) | ||
| - [Figma File](#figma-file) | ||
| - [Contributing](#contributing) | ||
| - [Support \& Donation](#support--donation) | ||
| - [Table of Contents](#table-of-contents) | ||
| - [Installation](#installation) | ||
| - [How to use](#how-to-use) | ||
| - [Global component example](#global-component-example) | ||
| - [Shape category components example](#component-with-shape-category-example) | ||
| - [Generating random shapes](#generating-random-shapes) | ||
| - [Random shape function](#using-random-shape-function) | ||
| - [Other Methods](#other-methods) | ||
| - [Accessing the shapes object](#renders-the-shapes-from-all-catagories) | ||
| - [Props](#props) | ||
| - [Categories](#categories) | ||
| - [Others](#others) | ||
| - [Classname and css](#classnames-and-css) | ||
| - [Builds](#builds) | ||
| - [Figma File](#figma-file) | ||
| - [Credits](#credits) | ||
| - [Contributing](#contributing) | ||
| - [Support \& Donation](#support--donation) | ||
@@ -50,3 +52,4 @@ ## Installation | ||
| 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](#props) to adjust the shapes and their properties available on Coolshapes SVG elements. | ||
| 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](#props) to adjust the shapes. | ||
@@ -61,3 +64,3 @@ #### Global component example | ||
| const App = () => { | ||
| return <Coolshape type="star" index={0} size={48} noise={true} />; | ||
| return <Coolshape type="star" index={0} size={48} noise={true}/>; | ||
| }; | ||
@@ -76,3 +79,3 @@ | ||
| const App = () => { | ||
| return <Star index={0} size={48} />; | ||
| return <Star index={0} size={48}/>; | ||
| }; | ||
@@ -83,6 +86,6 @@ | ||
| #### Generating random shapes | ||
| setting the `random` [prop](#props) to true or leaving the `index` or `type` prop empty would replace the shape with a random shape every time it renders. | ||
| setting the `random` [prop](#props) to true or leaving the `index` or `type` prop empty would replace the shape with a | ||
| random shape every time it renders. | ||
@@ -92,7 +95,7 @@ ```js | ||
| const Component = () => { | ||
| return <Coolshape random={true} />; | ||
| return <Coolshape random={true}/>; | ||
| }; | ||
| // renders a shape from the category star | ||
| const Component2 = () => { | ||
| return <Coolshape type="star" random={true} />; | ||
| return <Coolshape type="star" random={true}/>; | ||
| }; | ||
@@ -102,3 +105,2 @@ ``` | ||
| #### Using random shape function | ||
| ```js | ||
@@ -138,3 +140,3 @@ import { getRandomShape } from "coolshapes-react"; | ||
| #### Renders the shapes from all catagories | ||
| #### Renders the shapes from all categories | ||
@@ -147,5 +149,6 @@ ```jsx | ||
| <> | ||
| {Object.keys(shapes).map((shapeType, _) => { | ||
| return shapes[shapeType].map((Shape, index) => { | ||
| return <Shape size={48} />; | ||
| { | ||
| Object.keys(shapes).map((shapeType, _) => { | ||
| return shapes[shapeType].map((Shape, index) => { | ||
| return <Shape size={48} />; | ||
| }); | ||
@@ -171,41 +174,58 @@ })} | ||
| | name | data type | default | description | | ||
| | --------------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | ||
| | `size` | _Number_ | 200 | The dimension of shape | | ||
| | [`type`](#categories) | _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](#categories), 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 | | ||
| | name | data type | default | description | | ||
| |-----------------------|-----------|---------|----------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | `size` | _Number_ | 200 | The dimension of shape | | ||
| | [`type`](#categories) | _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](#categories), 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 retrive the first shape of any category, you would use the index number 0. | ||
| #### 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:** When importing the components the name would be capitalized, but when passing as prop, the name would be lower case. | ||
| | 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 | ||
| #### Name & Class | ||
| All components have inbuilt name starting 1. But, index starts from 0. | ||
| *Example: `<Star index={0} />` when rendered it's component name and class name is `Star1`* | ||
| #### ClassNames and css | ||
| #### umd & es | ||
| There are `umd` and `es` included in bundled version of the module, | ||
| all the components have classname `coolshapes` assigned as default, but you can also pass custom classname of yours. | ||
| ```jsx | ||
| import { Star } from 'coolshapes-react'; | ||
| export const Shape = () => { | ||
| return( | ||
| <Star className={"myshape"}/> | ||
| ) | ||
| } | ||
| ``` | ||
| ```scss | ||
| // 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 | ||
@@ -217,3 +237,3 @@ | ||
| using with react in the browser | ||
| Using with react in the browser | ||
@@ -223,21 +243,25 @@ ```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> | ||
| <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 | ||
| ``` | ||
@@ -248,8 +272,8 @@ ## Figma File | ||
| ## Credits | ||
| Crafted by realvjy. You are always welcome to share your feedback on twitter or any other social media platform. | ||
| ## Contributing | ||
| If you want to contribute, create a [pull request](https://github.com/realvjy/coolshapes-react/pulls). | ||
| 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](https://github.com/realvjy/coolshapes-react/pulls). | ||
| ## Support & Donation | ||
@@ -256,0 +280,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.02%
2133887
- Number of lines in readme file
- increased by9.76%
270
No dependency changes