react-mosaic

React component that generates mosaic from the given image source.

Usage no npm install needed!

<script type="module">
  import reactMosaic from 'https://cdn.skypack.dev/react-mosaic';
</script>

README

react-mosaic

Generate mosaic images in react.

Build Status npm version Greenkeeper badge

https://chitchu.github.io/react-mosaic/

Getting started

$ npm install react-mosaic
import React from 'react';
import Mosaic from 'react-mosaic';

const imageSource = 'data:image/png;base64, ...'; //requires base64 encoded image

// If you don't pass a `tileRenderer` function the
// component will render each tile with a boring box.
const tileRenderer = props => (
  <circle cx={props.x} cy={props.y} r={6} fill={props.fill} key={props.key} />
);

const App = () => (
  <Mosaic src={imageSource} tileSize="12" width="800" height="450" tileRenderer={tileRenderer} />
);

export default App;