react-image-effect-filter

A React component for applying filter effects and adjustments to images.

Installation

npm install react-image-effect-filter

or

yarn add react-image-effect-filter

Usage

Here's a basic example of how to use the ImageFilter component:

import React, { useState } from "react";
import { ImageFilter } from "react-image-effect-filter";

const App = () => {
  const [filter, setFilter] = useState("none");
  const [adjustments, setAdjustments] = useState({
    brightness: 100,
    contrast: 100,
    hue: 0,
    sepia: 0,
    saturation: 100,
    vignette: 0,
  });

  return (
    <div>
      <ImageFilter
        src="path/to/your/image.jpg"
        filter={filter}
        adjustments={adjustments}
      />
      {/* Add controls for filter and adjustments here */}
    </div>
  );
};

export default App;

API

ImageFilter Component

The main component of this package.

Props

| Prop | Type | Default | Description | | -------------------- | ---------- | ---------- | -------------------------------------------- | | src | string | (required) | The source URL of the image | | filter | FilterName | 'none' | The name of the filter to apply | | adjustments | object | {} | An object containing adjustment values | | onFilterChange | function | undefined | Callback function when filter changes | | onAdjustmentChange | function | undefined | Callback function when an adjustment changes |

All other props are passed through to the underlying <img> element.

Adjustments Object

The adjustments prop accepts an object with the following properties:

• brightness: number (default: 100)
• contrast: number (default: 100)
• hue: number (default: 0)
• sepia: number (default: 0)
• saturation: number (default: 100)
• vignette: number (default: 0)

Filters

Available filters can be imported from the package:

import { filters, FilterName } from "react-image-effect-filter";

The filters array contains objects with name and code properties for each available filter.

Adjustment Configs

Adjustment configurations can be imported from the package:

import { adjustmentConfigs } from "react-image-effect-filter";

The adjustmentConfigs array contains objects with configuration details for each adjustment.

Examples

Applying a Filter

import React from "react";
import { ImageFilter } from "react-image-effect-filter";

const FilteredImage = () => (
  <ImageFilter src="path/to/your/image.jpg" filter="sepia" />
);

Applying Adjustments

import React from "react";
import { ImageFilter } from "react-image-effect-filter";

const AdjustedImage = () => (
  <ImageFilter
    src="path/to/your/image.jpg"
    adjustments={{
      brightness: 110,
      contrast: 120,
      saturation: 130,
    }}
  />
);

Using Filter and Adjustment Controls

import React, { useState } from "react";
import {
  ImageFilter,
  filters,
  adjustmentConfigs,
} from "react-image-effect-filter";

const ImageEditor = () => {
  const [filter, setFilter] = useState("none");
  const [adjustments, setAdjustments] = useState({
    brightness: 100,
    contrast: 100,
    hue: 0,
    sepia: 0,
    saturation: 100,
    vignette: 0,
  });

  return (
    <div>
      <ImageFilter
        src="path/to/your/image.jpg"
        filter={filter}
        adjustments={adjustments}
      />
      <select value={filter} onChange={(e) => setFilter(e.target.value)}>
        {filters.map((f) => (
          <option key={f.name} value={f.name}>
            {f.name}
          </option>
        ))}
      </select>
      {adjustmentConfigs.map((config) => (
        <div key={config.key}>
          <label>{config.label}: </label>
          <input
            type="range"
            min={config.min}
            max={config.max}
            value={adjustments[config.key]}
            onChange={(e) =>
              setAdjustments((prev) => ({
                ...prev,
                [config.key]: Number(e.target.value),
              }))
            }
          />
        </div>
      ))}
    </div>
  );
};

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.