React Fakeimg

Need fake image for your mockup ? react-fakeimg will create for you a fake image thanks to canvas. There is no HTTP Requests which means internet connection is not required.

Install in your project

via npm

npm install --save react-fakeimg

via yarn

yarn add react-fakeimg

How to use

Import ES6

import FakeImg from 'react-fakeimg';

Simple example

<FakeImg
  alt="example"
  width={500}
  height={200}
/>

Text example

<FakeImg
  alt="example"
  width={500}
  height={200}
  text="Bonjour!"
/>

Change color example

<FakeImg
  alt="example"
  width={500}
  height={200}
  text="New color"
  bgColor="#005cc5"
  fontColor="#ffffff"
/>

API

Attributes list

Properties | type | Required | default | Description --- | --- | :---: | --- | --- alt | string | | | alt attribute is require in HTML5 for img tag bgColor | string | | #c19d67 | Background colors className | string | | | Add class attribute fontColor | string | | #3a2306 | Font color height | Number | ✓ | | Image height id | string | | | #id text | string | | | text to replace "width x height" style | object | | | If you want to add style to the image width | Number | ✓ | | Image width

Events list

Name | type | Parameters | Required | Description --- | --- | :---: | --- | --- onMount | func | none | | Called when the component did mount onClick | func | none | | Called when click on the component onMouseEnter | func | none | | Called when mouse enter the component onMouseLeave | func | none | | Called when mouse leave the component onUnMount | func | none | | Called when the component will unMount