Skip to content

Commit ffafcda

Browse files
committed
update README
1 parent 1d79fb9 commit ffafcda

File tree

1 file changed

+33
-72
lines changed

1 file changed

+33
-72
lines changed

README.md

+33-72
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,70 @@
1-
<img align="right" src="https://mymodernmet.com/wp/wp-content/uploads/2018/09/color-theory-basics.jpg" width="300"/>
2-
3-
## javascript-color-gradient
1+
<div>
2+
<img src="https://mymodernmet.com/wp/wp-content/uploads/2018/09/color-theory-basics.jpg" height="140">
3+
<h1>JavasScript Color Gradient</h1>
4+
<p>Lightweight JavaScript library, used to generate an array of color gradients by providing start and finish colors, as well as the required number of midpoints.</p>
5+
</div>
46

57
![MIT License](https://img.shields.io/npm/l/javascript-color-gradient)
8+
[![](https://img.shields.io/npm/dm/javascript-color-gradient)](https://www.npmjs.com/package/javascript-color-gradient)
69
![Version](https://img.shields.io/github/package-json/v/adrinlol/javascript-color-gradient)
710
![Size](https://img.shields.io/bundlephobia/min/javascript-color-gradient)
8-
![GitHub stars](https://img.shields.io/github/stars/Adrinlol/javascript-color-gradient?style=social)
9-
10-
Lightweight JavaScript library, used to generate an array of color gradients by providing start and finish colors, as well as the required number of midpoints.
11-
12-
## Demo
13-
14-
See [Live Preview on CodeSandbox](https://codesandbox.io/s/javascript-color-gradient-csgfd).
15-
16-
**Note:** All the examples are using ES6, be sure is supported in your browser or modify as needed, Chrome recommended.
1711

1812
## Installation
1913

20-
```bash
21-
npm install javascript-color-gradient
22-
```
23-
24-
or
14+
For Node.js: Install the `javascript-color-gradient` npm module:
2515

2616
```bash
27-
yarn add javascript-color-gradient
17+
npm install javascript-color-gradient
2818
```
2919

30-
## Usage
31-
32-
Using two color gradients
20+
Then import the module into your JavaScript:
3321

3422
```javascript
3523
import Gradient from "javascript-color-gradient";
36-
37-
const colorGradient = new Gradient();
38-
39-
const color1 = "#3F2CAF";
40-
const color2 = "#8BC2E3";
41-
42-
colorGradient.setGradient(color1, color2);
4324
```
4425

45-
Or more:
46-
47-
```javascript
48-
import Gradient from "javascript-color-gradient";
49-
50-
const colorGradient = new Gradient();
51-
52-
const color1 = "#3F2CAF";
53-
const color2 = "#e9446a";
54-
const color3 = "#edc988";
55-
const color4 = "#607D8B";
26+
## Demo
5627

57-
colorGradient.setMidpoint(20);
28+
[A demo is worth a thousand words](https://codesandbox.io/s/javascript-color-gradient-csgfd).
5829

59-
colorGradient.setGradient(color1, color2, color3, color4);
60-
```
30+
**Note:** All the examples are using ES6, be sure is supported in your browser or modify as needed, Chrome recommended.
6131

6232
## Methods
6333

64-
To set two or more hex color values. Should always be defined.
34+
| Method | | Description |
35+
| ---------------- | --- | ---------------------------------------------------------------------------------------- |
36+
| `setGradient()` | | Initializes `colorGradient` with two or more hex color values. Should always be defined. |
37+
| `setMidpoint(n)` | | Defines number of midpoints. Defaults to 10. |
38+
| `getArray()` | | Returns an array of hex color values . |
39+
| `getColor(n)` | | Returns single hex color value corresponding to the provided index. |
6540

66-
```javascript
67-
setGradient(color1, color2);
68-
```
69-
70-
To set the number range to n. By default n is 10.
41+
Let's see them in action:
7142

7243
```javascript
73-
setMidpoint(n);
74-
```
75-
76-
To return an array of hex colors. Requires no parameters.
44+
console.log(colorGradient.getArray());
45+
// ["#4e4ab9", "#5d68c4", "#6d86ce", "#7ca4d9", "#8bc2e3"]
7746

78-
```javascript
79-
getArray();
47+
console.log(colorGradient.getColor(3));
48+
// #6d86ce
8049
```
8150

82-
To return certain hex color corresponding to the number.
83-
84-
```javascript
85-
getColor(n);
86-
```
51+
## Usage
8752

88-
Let's see them in action:
53+
Using two color gradients
8954

9055
```javascript
91-
console.log(colorGradient.getArray());
92-
// outputs ["#4e4ab9", "#5d68c4", "#6d86ce", "#7ca4d9", "#8bc2e3"]
56+
import Gradient from "javascript-color-gradient";
9357

94-
console.log(colorGradient.getColor(3));
95-
// outputs #6d86ce
58+
colorGradient.setGradient("#3F2CAF", "#8BC2E3");
9659
```
9760

98-
## Example
99-
100-
Implementing javascript-color-gradient library into React.js application, using two gradient colors and 10 midpoints.
101-
102-
![1](https://user-images.githubusercontent.com/48876996/98634350-9c2ae980-233c-11eb-91f5-8c97b2194191.png)
61+
Or more:
10362

104-
The following example is using four gradient colors and 20 midpoints.
63+
```javascript
64+
import colorGradient from "javascript-color-gradient";
10565

106-
![1](https://user-images.githubusercontent.com/48876996/98633966-e8c1f500-233b-11eb-8b86-26a39c12b7d0.png)
66+
colorGradient.setGradient("#3F2CAF", "#e9446a", "#edc988", "#607D8B");
67+
```
10768

10869
## Contributing
10970

@@ -113,7 +74,7 @@ Please make sure to update tests as appropriate.
11374

11475
## License
11576

116-
javascript-color-gradient is [MIT licensed.](https://github.com/Adrinlol/javascript-color-gradient/blob/master/LICENSE)
77+
`javascript-color-gradient` is [MIT licensed.](https://github.com/Adrinlol/javascript-color-gradient/blob/master/LICENSE)
11778

11879
## Contributors
11980

0 commit comments

Comments
 (0)