React Thumbolidator

A React component for Thumbolidator

See also Thumbolidator

This is still a proof of concept. Please don't use in any serious project.

thumb.micro

Try demo here!

Concept

Jpegtran can merge jpeg files into a big jpeg file. This will help reduce downloading many number of jpeg files through http.

Jpegtran drop-patch does not re-encode jpegs so thumbnails can be added later on without dropping quality.`

Thumbolidator creates two tiles of the thumbnails, Micro and Thumbo. The Thumbo react component will shows a micro thumbnail while loading thumbnails.

Install

npm install --save react-thumbolidator

Usage

import React, { Component } from 'react'

import { Thumbo } from 'react-thumbolidator'

class Example extends Component {
  render ({ files }) {
    return (
      <>
        {files.map(file => (
          <Thumbo src={`http://localhost/images/${file}`} key={file} size={64} />
        ))}
      </>
    )
  }
}

Todos and limitations

• Needs a web-server setting to return .thumbolidate file for the directory
• [x] Support pagination
• [ ] Managing cache for memory usage
  • Cannot remove memoized cache

License

MIT © kennyhyun