Skip to content

Commit 9e58f3c

Browse files
committed
update README
1 parent 627cecf commit 9e58f3c

File tree

1 file changed

+21
-16
lines changed

1 file changed

+21
-16
lines changed

README.md

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ npm install javascript-color-gradient
2020
Then import the module into your JavaScript:
2121

2222
```javascript
23-
import colorGradient from "javascript-color-gradient";
23+
import { Gradient } from "javascript-color-gradient";
2424
```
2525

2626
## Demo
@@ -31,21 +31,23 @@ import colorGradient from "javascript-color-gradient";
3131

3232
## Methods
3333

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. |
34+
| Method | | Description |
35+
| -------------------- | --- | ------------------------------------------------------------------------------------- |
36+
| `setColorGradient()` | | Initializes `{Gradient}` with two or more hex color values. Should always be defined. |
37+
| `setMidpoint(n)` | | Defines number of midpoints. Defaults to 10. |
38+
| `getColors()` | | Returns an array of hex color values . |
39+
| `getColor(n)` | | Returns single hex color value corresponding to the provided index. |
4040

4141
## Usage
4242

4343
Using 2 colors and default (10) midpoints to generate an array of hex color values:
4444

4545
```javascript
46-
import colorGradient from "javascript-color-gradient";
46+
import { Gradient } from "javascript-color-gradient";
4747

48-
const gradientArray = colorGradient.setGradient("#3F2CAF", "e9446a").getArray();
48+
const gradientArray = new Gradient()
49+
.setColorGradient("#3F2CAF", "e9446a")
50+
.getColors();
4951

5052
console.log(gradientArray);
5153
// ["#502ea8", "#6131a1", "#72339a", "#833693", "#94388d", "#a53a86", "#b63d7f", "#c73f78", "#d84271", "#e9446a"]
@@ -56,10 +58,10 @@ Using 4 colors and 20 midpoints to generate an array of hex color values :
5658
```javascript
5759
import colorGradient from "javascript-color-gradient";
5860

59-
const gradientArray = colorGradient
60-
.setGradient("#3F2CAF", "#e9446a", "#edc988", "#607D8B")
61+
const gradientArray = new Gradient()
62+
.setColorGradient("#3F2CAF", "#e9446a", "#edc988", "#607D8B")
6163
.setMidpoint(20)
62-
.getArray();
64+
.getColors();
6365

6466
console.log(gradientArray);
6567
// ["#5930a5", "#72339a", "#8c3790", "#a53a86", "#bf3e7b", "#d84271", "#e94b6c", "#ea5f70", "#ea7375", "#eb8779", …]
@@ -68,12 +70,15 @@ console.log(gradientArray);
6870
Using two colors and default (10) midpoints to return single hex color value corresponding to the provided index:
6971

7072
```javascript
71-
import colorGradient from "javascript-color-gradient";
73+
import { Gradient } from "javascript-color-gradient";
7274

73-
const colorAtTwo = colorGradient.setGradient("#3F2CAF", "e9446a").getColor(2);
75+
const colorAtIndexTwo = new Gradient()
76+
.setColorGradient("#3F2CAF", "e9446a")
77+
.setMidpoint(20)
78+
.getColor(2);
7479

75-
console.log(colorAtTwo);
76-
// #502ea8
80+
console.log(colorAtIndexTwo);
81+
// #5930a5
7782
```
7883

7984
## Contributing

0 commit comments

Comments
 (0)