search

josealejandro2928 / react-image-picker-editor

React library for the selection, edition and compression of images in png, jpeg and webp formats This package is made completely with html and css without any extra components or npm packages. It's based in functional components based in hooks, for optimization were used memo, useMemo and useCalback for avoiding any extra-renders.
https://www.npmjs.com/package/react-image-picker-editor
MIT License
27 stars 21 forks source link

feat: export function handleFileSelect, onRemove, onOpenEditPanel #13

Closed tienshake closed 4 months ago

tienshake commented 4 months ago

Export functions so they can be more easily used in the parent component

handleFileSelect, onRemove, onOpenEditPanel 

import 'react-image-picker-editor/dist/index.css'

import { useRef } from 'react'
import ReactImagePickerEditor, { type ImagePickerConf, type ImagePickerEditorRef } from 'react-image-picker-editor'

const config: ImagePickerConf = {
  borderRadius: '12px',
  language: 'en',
  width: '150px',
  height: '150px',
  objectFit: 'contain',
  compressInitial: null,
  hideDownloadBtn: true,
  hideAddBtn: true,
}

const ParentComponent = () => {
  const imagePickerRef = useRef<ImagePickerEditorRef>(null)

  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (imagePickerRef.current) {
      imagePickerRef.current.handleFileSelect(event)
    }
  }

  return  <ReactImagePickerEditor config={config} ref={imagePickerRef} />
}

Type
export interface ImagePickerEditorRef {
  onRemove: () => void;
  onOpenEditPanel: () => void;
  handleFileSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
}