https://github.com/gre/gl-react-image

Universal gl-react Image that implements resizeMode in OpenGL
https://github.com/gre/gl-react-image

Last synced: about 2 months ago
JSON representation

Universal gl-react Image that implements resizeMode in OpenGL

• Host: GitHub
• URL: https://github.com/gre/gl-react-image
• Owner: gre
• License: mit
• Created: 2016-06-18T22:38:28.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T20:27:42.000Z (about 2 years ago)
• Last Synced: 2024-08-17T22:46:58.383Z (4 months ago)
• Language: JavaScript
• Homepage: https://gl-react-image.surge.sh
• Size: 2.66 MB
• Stars: 58
• Watchers: 3
• Forks: 17
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# gl-react-image ![](https://img.shields.io/npm/v/gl-react-image.svg) ![](https://img.shields.io/badge/gl--react-3-05F561.svg) ![](https://img.shields.io/badge/gl--react-dom%20%7C%20native-f90.svg)

Universal [gl-react](https://github.com/gre/gl-react) module **that implements [resizeMode prop](https://facebook.github.io/react-native/docs/image.html#resizemode)** in OpenGL.

[-> Example App <-](https://gl-react-image.surge.sh/)

The library is called `gl-react-image` but barely anything can be the source, it can be a video, a canvas, another stack of effects,... (anything that gl-react support as a texture)

```sh

yarn add gl-react-image

```

```js

import GLImage from "gl-react-image";

import {Surface} from "gl-react-dom";// or "gl-react-native" or "gl-react-expo" or ..

  

```

## `GLImage` Props

- `source` **(required)**: the texture input. It can be an image URL or anything gl-react supports for textures.

- `resizeMode`: `"cover" | "stretch" | "contain"` : This implement the exact same [React Native Image resizeMode prop](https://facebook.github.io/react-native/docs/image.html#resizemode) in OpenGL.

- `center` and `zoom` props can be used with `resizeMode=cover` to define the cover crop position:

  - `center`, an [x,y] array, defines the gravity of the crop *(x and y are in [0, 1] bound)*.

  - `zoom` should be a value in **] 0 , 1 ]** bound. 1 means no zoom, more value is close to 0, more the zoom is important.

- `width` and `height`: only provide if you also want a resize. (this is feeded to the gl-react Node width/height)

## Example

[-> Example App <-](https://gl-react-image.surge.sh/)

```html

```

alternative syntax is to use only `source` via a `{ uri, width, height }` object.

```html

```

```html

```

```html

```

```html

```

```html

```

### Web usage example

```js

import React from "react";

import {render} from "react-dom";

import {Surface} from "gl-react-dom";

import GLImage from "gl-react-image";

render(

  

    

  

  , document.body

))

```

### React Native usage example

```js

import React from "react";

import {Image, View} from "react-native";

import {Surface} from "gl-react-dom";

import GLImage from "gl-react-image";

export default class Example extends Component {

  static propTypes = {

    src: PropTypes.string.isRequired,

  };

  render () {

    return (

      

        

      

    );

  }

}

```