# ymage

> React-native component for fast, reliable and advenced image handing.

Latest version **1.1.3** (published 2023-11-13) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2023-11-13 |
| First published | 2023-10-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 80.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Bartosz Konieczny |
| Maintainers | ylfe-dev |
| Keywords | react-image, image loader, copyright, react, image-sizing |

## Links

- npm: https://www.npmjs.com/package/ymage
- Repository: https://github.com/ylfe-dev/Ymage
- Homepage: https://github.com/ylfe-dev/Ymage#readme
- Issues: https://github.com/ylfe-dev/Ymage/issues
- npm.io page: https://npm.io/package/ymage

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.3 (latest) — 2023-11-13
- 1.1.2 — 2023-11-10
- 1.1.1 — 2023-11-09
- 1.1.0 — 2023-11-08
- 1.0.3 — 2023-10-04
- 1.0.2 — 2023-10-04
- 1.0.1 — 2023-10-04
- 1.0.0 — 2023-10-04

## README

# Ymage

**Package is in beta - in production use is not recomended for now**
<br/><br/>
Ymage is react zero dependencies component that takes care of loading optimization, neat presentation, copyright protection,caching and some extras with just one line of code.



<p align="center">
<img align="center" width="456" height="312" style="margin: 0 1rem" src="./assets/out.gif" >
</p>

✅ Advenced progressive JPEG recognition - image is rendered on first progressive scan avaiable - before `onLoad`.<br/>
✅ Sized, neat image placeholders for loading, error and copyright <br/>
✅ Short props for styling<br/>
✅ Image copy protection<br/>
✅ All image formats are compatible - progressive JPEG is just recommended way<br/>
✅ Callback with image dimensions `onSize`<br/>



<br/>

## Installation


```shell
$ npm install ymage
```

Import module to `yourcode.js`:
```JavaScript
import Ymage from 'ymage'
```


<br/>

## Usage


```JavaScript
<Ymage url="fruit.jpg" w={300} h={200} r={10}/>
```

Using `onSize` callback:

```JavaScript
function sizeHandler(size) 
	console.log("Image is " + size.x + " / " + size.y)
	
<Ymage copyright url={"fruit.jpg"} wh={2/3} h={200} onSize={sizeHandler} />
```

<br/>


### Styling
In order to properly create the loading shape of the Ymage, you can size it with two of the three properties (`w` + `h`), (`w` + `wh`) or (`h` + `wh`)

|Property|CSS|
|-|-|
|w|`width`|
|h|`height`|
|wh|`aspect-ratio` (width / height)|
|r|`border-radius`|
|bg|`background-color`|
|color|icons color|

<br/>

### Behavior
In addition to following you can use other html props on Ymage like `id`, `className`, `onClick` etc.

|Property|Default|Description|
|-|:-:|-|
|url| - |Image `url`|
|lazy| `200px` | Viewport distance from the image that trigges loading (values like css `margin`). Set to `false` to start loading immediately.|
|copyright|`false`|Basic anti-copy protection|
|type|`img`|HTML syntax tag to render image (`img` or `div`).|
|onLoad| - | Callback function on image fully fetched |
|onSize| - | Callback function with size (when using progressive jpeg it fires on first scan ready) returned as object in first argument `onLoad={(size) => ... size.x /size.y ...}`|

<br/>


<p align="center">
    <img align="center" width="496" height="392" style="margin: 0 1rem" src="./assets/copy.gif" >
</p>


<br/>

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