coolshapes-react
Advanced tools
Comparing version 0.0.6-alpha.0 to 0.0.7-alpha.0
{ | ||
"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": { |
133
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> |
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
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
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
2130116
2554
233