Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

coolshapes-react

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

coolshapes-react - npm Package Compare versions

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

4

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": {

[![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>

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc