React-fakeimg NPM

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	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