Skip to content

Commit

Permalink
update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@realvjy
realvjy committed Mar 29, 2024
1 parent 30d7ea9 commit 3a92a93
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 44 deletions.
101 changes: 60 additions & 41 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,33 @@
[![Coolshapes](https://coolshap.es/react-preview.jpg)](https://coolshap.es)
# <p align=center>Coolshapes</p>
<p align="center">
<a href="https://github.com/realvjy/coolshapes-react/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/coolshapes-react" alt="license"></a>
<a href="https://www.npmjs.com/package/coolshapes-react"><img src="https://img.shields.io/npm/v/coolshapes-react" alt="npm package"></a>

</p>


### What & Why?
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.


## Table of Contents

- [Usage](#usage)
- [React](#react)
### Table of Contents
- [Installation](#installation)
- [How to use](#how-to-use)
- [Global Component](#how-to-use)
- [Using Shape Category](#component-with-shape-category-example)
- [Random functions](#using-random-shape-function)
- [Other Methods](#other-method)
- [Props](#props)
- [Categories](#categories)
- [Figma File](#figma-file)
- [Contributing](#contributing)
- [Community](#community)
- [License](#license)
- [License](https://github.com/realvjy/coolshapes-react?tab=MIT-1-ov-file)
- [Credits](#credits)
- [Sponsors](#sponsors)

## Usage

At its core, Coolshapes is a collection of [SVG](https://coolshap.es) files. This means that you can use this in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`).

The following are ways you can use Coolshapes.



# Coolshapes React

Implementation of the coolshapes icon library for react applications.
## Installation


## How to use


Implementation of the coolshapes icon library for web applications.

```sh
npm install coolshapes-react
```
Expand All @@ -47,9 +37,13 @@ or
```sh
yarn add coolshapes-react
```
### Example

There's a global component and component for each category of shapes. You can pass additional props to adjust the shape. These components extend from SVG elements, so they support all the props available in a SVG element.
## How to use

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.

#### Global component example
Just import the Global component `Coolshape` and it will work.

```js
import { Coolshape } from 'coolshapes-react';
Expand All @@ -61,7 +55,8 @@ const App = () => {
export default App;
```

You can import the component for specific category and simply pass the index of the shape.
#### 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';

Expand All @@ -71,7 +66,7 @@ const App = () => {

export default App;
```
#### Generating random shapes.
#### 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.
```js
// renders a random shape from any category
Expand All @@ -84,7 +79,7 @@ const Component2 = () => {
};
```

Using random shape function.
#### Using random shape function
```js
import { getRandomShape } from 'coolshapes-react';
```
Expand All @@ -103,8 +98,8 @@ getRandomShape({onlyId: true, type:"star"}) // returns shape identifier that can
// {shapeType: "star", index}
```

#### others
all the components are mapped from object that we have given you access to
#### Other Methods
All the components are mapped from object that we have given you access to

```js
const shapes = {
Expand All @@ -114,7 +109,7 @@ const shapes = {
}
```

renders the shapes from all catagories
#### Renders the shapes from all catagories
```jsx
import { shapes } from 'coolshapes-react'

Expand Down Expand Up @@ -148,27 +143,38 @@ const StarComponent1 = starComponents[0]
| `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 |
| `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 |

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 retrive the first shape of any category, you would use the index number 0.

### Categories

| type | shapes |
There are a total of **115** shapes available in Coolshapes under the following categories.
| name | count |
| ------------- | -------- |
| `star` | 12 |
| `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.



### others
we have have provide the `cjs`, `umd` and `es` build versions of the module,
### Others
There are `cjs`, `umd` and `es` included in bundled versions of the module,

#### cjs

```js
const Coolshapes = reqiore("coolshapes-react")
const Coolshapes = require("coolshapes-react")
```
using with react in the browser

Expand All @@ -180,7 +186,7 @@ using with react in the browser
<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@0.0.5-alpha.1/dist/umd/coolshapes.js"></script>
<script src="https://unpkg.com/coolshapes-react/dist/umd/coolshapes.js"></script>
</head>
<body>
<div id="root"></div>
Expand All @@ -194,3 +200,16 @@ using with react in the browser
</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.

If you want to contribute. Just create a [pull request](https://github.com/realvjy/coolshapes-react/pulls).

## Support & Donation

**Coffee fuels coding ☕️**

<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>
6 changes: 3 additions & 3 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 3a92a93

Please sign in to comment.