coolshapes-react - npm Package Compare versions

Comparing version 0.0.6-alpha.0 to 0.0.7-alpha.0

package.json

 {
   "name": "coolshapes-react",
-  "version": "0.0.6-alpha.0",
+  "version": "0.0.7-alpha.0",
   "description": "A react component library for coolshapes",
@@ -43,3 +43,3 @@ "keywords": [
     "type": "git",
-    "url": "git+https://github.com/realvjy/coolshapes-react.git"
+    "url": "https://github.com/realvjy/coolshapes-react"
   },
@@ -46,0 +46,0 @@ "bugs": {

README.md

 [![Coolshapes](https://coolshap.es/react-preview.jpg)](https://coolshap.es)
+
 # <p align=center>Coolshapes</p>
+
 <p align="center">
@@ -11,5 +13,4 @@ <a href="https://github.com/realvjy/coolshapes-react/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/coolshapes-react" alt="license"></a>
 
+### Table of Contents
 
-
-### Table of Contents
 - [Installation](#installation)
@@ -28,6 +29,4 @@ - [How to use](#how-to-use)
 
-
 ## Installation
 
-
 ```sh
@@ -48,6 +47,7 @@ npm install coolshapes-react
 #### Global component example
+
 Just import the Global component `Coolshape` and it will work.
 
 ```js
-import { Coolshape } from 'coolshapes-react';
+import { Coolshape } from "coolshapes-react";
 
@@ -62,5 +62,7 @@ const 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.
+
 ```js
-import { Star } from 'coolshapes-react';
+import { Star } from "coolshapes-react";
 
@@ -73,8 +75,11 @@ const App = () => {
 ```
+
 #### 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.
+
 ```js
 // renders a random shape from any category
 const Component = () => {
-  return <Coolshape random={true}/>;
+  return <Coolshape random={true} />;
 };
@@ -88,17 +93,22 @@ // renders a shape from the category star
 #### Using random shape function
+
 ```js
-import { getRandomShape } from 'coolshapes-react';
+import { getRandomShape } from "coolshapes-react";
 ```
+
 ```js
-getRandomShape() // returns a random shape component
+getRandomShape(); // returns a random shape component
 ```
+
 ```js
-getRandomShape({type:"ellipse"}) // returns a random shape component from the category ellipse
+getRandomShape({ type: "ellipse" }); // returns a random shape component from the category ellipse
 ```
+
 ```js
-getRandomShape({onlyId: true}) // returns shape identifier that can passed as props to the shape component
+getRandomShape({ onlyId: true }); // returns shape identifier that can passed as props to the shape component
 // {shapeType, index}
 ```
+
 ```js
-getRandomShape({onlyId: true, type:"star"}) // returns shape identifier that can passed as props to the shape component
+getRandomShape({ onlyId: true, type: "star" }); // returns shape identifier that can passed as props to the shape component
 // {shapeType: "star", index}
@@ -108,2 +118,3 @@ ```
 #### Other Methods
+
 All the components are mapped from object that we have given you access to
@@ -120,4 +131,5 @@
 #### Renders the shapes from all catagories
+
 ```jsx
-import { shapes } from 'coolshapes-react'
+import { shapes } from "coolshapes-react";
 
@@ -127,20 +139,21 @@ const ShapeGrid = () => {
     <>
-      { 
-        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} />;
+        });
       })}
     </>
-  )
+  );
 };
+```
 
-```
 ###### syntax
+
 ```js
-shapes[type][index]
+shapes[type][index];
 ```
+
 ```js
-const starComponents = shapes['star']
-const StarComponent1 = starComponents[0]
+const starComponents = shapes["star"];
+const StarComponent1 = starComponents[0];
 ```
@@ -150,9 +163,9 @@
 
-| 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 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                                                                                                   |
 
@@ -163,32 +176,33 @@ **Notes:**
 ### 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        |  
+| name | count |
+| ------------- | -------- |
+| `star` | 13 |  
+| `triangle` | 14 |  
+| `moon` | 15 |  
+| `polygon` | 8 |  
+| `flower` | 16 |
+| `rectangle` | 9 |  
+| `ellipse` | 12 |  
+| `wheel` | 7 |  
+| `misc` | 11 |  
+| `number` | 10 |
 
-**Note:** If you're importing directly as component, the name must be in Title case. And the category type it will be lowercase.
+**Note:** When importing the components the name would be capitalized, but when passing as prop, the name would be lower case
 
+### Others
 
+There are `cjs`, `umd` and `es` included in bundled version of the module,
 
-### Others
-There are `cjs`, `umd` and `es` included in bundled versions of the module,
-
 #### cjs
 
 ```js
-const Coolshapes = require("coolshapes-react")
+const Coolshapes = require("coolshapes-react");
 ```
+
 using with react in the browser
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
@@ -203,17 +217,20 @@ <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>
+    <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.
@@ -227,2 +244,2 @@
 
-<a href="https://www.buymeacoffee.com/realvjy" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
+<a href="https://www.buymeacoffee.com/realvjy" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

New alerts

License Policy Violation

License

This 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

License

This 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

2130116

increased by0.65%

Lines of code

2554

increased by0.63%

Number of lines in readme file

233

increased by8.37%

No dependency changes