# abdulimageuploader2

> Image upload component with image preview

Latest version **0.2.5** (published 2023-02-14) · 0 weekly downloads

## Install

```sh
npm install abdulimageuploader2
pnpm add abdulimageuploader2
yarn add abdulimageuploader2
bun add abdulimageuploader2
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.5 |
| Published | 2023-02-14 |
| First published | 2023-02-14 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 10.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | AbdulAzeez |
| Maintainers | abdulazeeztp007 |
| Keywords | react, components, ui |

## Links

- npm: https://www.npmjs.com/package/abdulimageuploader2
- npm.io page: https://npm.io/package/abdulimageuploader2

## Dependencies (2)

- [bootstrap](https://npm.io/package/bootstrap.md) ^5.2.3
- [react-bootstrap](https://npm.io/package/react-bootstrap.md) ^2.7.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 0.2.5 (latest) — 2023-02-14
- 0.2.4 — 2023-02-14
- 0.2.3 — 2023-02-14
- 0.2.2 — 2023-02-14
- 0.2.1 — 2023-02-14
- 0.2.0 — 2023-02-14
- 0.1.9 — 2023-02-14
- 0.1.8 — 2023-02-14

## README

## How to configure

import { useState } from 'react';

import { ImageUploader } from 'abdulimageuploader2';


function App() {

  const [file,setFile]=useState(null);


  const handleSubmit=async(e)=>{
     console.log(file)
  }

  return (


    <div className='container d-flex justify-content-center mt-5 ' >
      <div className=' border border-dark pb-5 px-3'>
        <h4 className='text-center '>Image Uploader</h4>
        <form onSubmit={handleSubmit} >

          <ImageUploader value={setFile}/>
          
          <button type='submit' className='btn btn-info mt-1 '>Submit</button>

        </form>
      </div>

    </div>
  );
}

export default App;

## Props :
  * value     : it must be a useState setfunction and it should be provided as props, to get the file uploaded from the component.
  * updateColor : used to configure the color of update button (default is green)
  * deleteColor : used to configure the color of delete button (default is red)
  * buttonColor : used to configure the background color of button in the modal (default is gray)
  * buttonTextColor:  used to configure the color of the button text in the modal (default is white)

---
_Source: https://npm.io/package/abdulimageuploader2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._