react-gradient-palette

1.0.9 • Public • Published

Certainly! A well-crafted README is essential for attracting users to your React library. Here's a template you can use as a starting point for your react-gradient-palette library:


React Gradient Palette

React Gradient Palette

React Gradient Palette is a lightweight and customizable React library for generating gradients effortlessly. It provides a simple and intuitive interface for users to create and select gradients.

Features

  • 🎨 Easy-to-use React component: <GradientMaker setGradient={setGradient} />
  • 🌈 Generate beautiful gradients with a few clicks
  • 🚀 Lightweight and fast
  • 🔧 Customizable options for advanced users
  • 📦 Easily integrate into your React projects

Demo

See the react-gradient-palette in action here


Installation

Install the package using npm:

npm install react-gradient-palette

Or using yarn:

yarn add react-gradient-palette

Usage

Import the GradientMaker component and use it in your React project:

import React from 'react';
import { GradientMaker } from 'react-gradient-palette';

function YourComponent() {
  const setGradient = (selectedGradient) => {
    // Handle the selected gradient here
    console.log('Selected Gradient:', selectedGradient);
  };

  return (
    <div>
      <h1>Your React App</h1>
      <GradientMaker setGradient={setGradient} defaultGradient={['#ff5733', '#d147a3']}/>
    </div>
  );
}

API

Prop Type Default Description
setGradient callback function Receives the selected gradient
defaultGradient boolean ['#4ec7d9','#135fca'] array of default gradient colors
showRadial boolean false Show radial type gradient
showConic boolean false Show conic type gradient
showCloseBtn boolean false Show close button to hide gradient generator
onCloseClick callback function call the function on clicking close button

Customization

The GradientMaker component provides various customization options. You can customize the appearance and behavior by passing props to the component. For example:

<GradientMaker
  setGradient={setGradient}
  defaultGradient={['#ff5733', '#d147a3']}
  showRadial={true}
/>

License

MIT © AishwaryaMurade

Contributing

If you have suggestions or find issues, please feel free to open an issue or create a pull request. Contributions are welcome!

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.0.90latest

Version History

VersionDownloads (Last 7 Days)Published
1.0.90
1.0.80
1.0.70
1.0.60
1.0.50
1.0.40
1.0.30
1.0.20
1.0.10
1.0.00

Package Sidebar

Install

npm i react-gradient-palette

Weekly Downloads

0

Version

1.0.9

License

MIT

Unpacked Size

160 kB

Total Files

7

Last publish

Collaborators

  • ar-murade