Skip to content

Latest commit

 

History

History
37 lines (28 loc) · 1.26 KB

README.md

File metadata and controls

37 lines (28 loc) · 1.26 KB

Material Gradient Generator

Intended use case is mainly for React when you need to iterate over items in a list and apply a soft, linear gradient to them, i.e. buttons or dashboard items.

  • Install the package:

    • npm i material-gradient-generator --save

  • Import the gradient genetator:

    • import { materialGradientGenerator } from "material-gradient-generator";

  • Use the generator! 🔥

    • const colourGen = new materialGradientGenerator(false, 500, 200, 2);
    • const nextColour = colourGen.NextColour();
// excludeRed?: boolean
// darkShade?: number
// lightShade?: number
// _step?: number
const colourGen = new materialGradientGenerator(false, 500, 200, 2);
const nextColour = colourGen.NextColour();

<button className='btn btn-light' style={{ margin: "5px", backgroundImage: `${nextColour}` }}
    <i className='fa fa-free-code-camp'></i>
</button>

<button className='btn btn-light' style={{ margin: "5px", backgroundImage: `${nextColour}` }}
    <i className='fa fa-diamond'></i>
</button>

<button className='btn btn-light' style={{ margin: "5px", backgroundImage: `${nextColour}` }}
    <i className='fa fa-paper-plane'></i>
</button>

EXAMPLE.