Skip to content
Tueri.io - React Integration
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.gitignore
.npmignore
LICENSE
README.md
index.js
package-lock.json
package.json
webpack.config.js

README.md

Tueri.io - ReactJS Integration

React integration for Tueri image processing service.

Documentation

  • Automatic image optimization (compression, resizing and image format)
  • Responsive images
  • Lazy Loading
  • Low-quality image placeholders (LQIP)

Installation

  • NPM: npm install @tueri/react
  • YARN: yarn add @tueri/react

Usage

  1. Add the <TueriProvider/> component to the root of your React component tree. This component provides child components api and base url information.
import TueriProvider from '@tueri/react'

ReactDOM.render(
    <TueriProvider>
        <MyRootComponent />
    </TueriProvider>,
    document.getElementById('root)
)
  1. Use the Tueri <Img /> component to render your images.
<Img src={ tueriImageId } alt='Alt Text' />

The <Img /> component automatically handles image optimization, responsive images, lazy loading and low-quality image placeholders.

Props

  • src: String (REQUIRED)

  • alt: String (REQUIRED)

  • options: Object (optional)

    • Default: { w: autoCalculatedWidth }
    • Possible values: see documentation for complete option list
  • format: String (optional)

    • Default: 'jpg'
    • Possible values: 'jpg', 'png', 'webp', 'gif'
You can’t perform that action at this time.