React Simple Placeholder Image

A Minimal lightweight react component for adding a nice image placeholder.

Install

npm

npm i react-simple-placeholder-image

Yarn

yarn add react-simple-placeholder-image

---

Examples

import React from 'react'
import { DummyImage } from 'react-simple-placeholder-image'

const MyComponent = () => {
  return (
    <div className='App'>
      <DummyImage width={500} height={500} />
      <DummyImage width={500} height={500} placeholder='Hello World!' />
      <DummyImage width={500} height={500} shape='image' />
      <DummyImage width={500} height={500} shape='avatar' />
      <DummyImage width={500} height={500} placeholder='Colored!' bgColor='#0a1929' fgColor='#eb0014' />
    </div>
  )
}

Component

import React from 'react'
import { DummyImage } from 'react-simple-placeholder-image'

const MyComponent = () => {
  return (
    <div className='App'>
      <DummyImage {/* Props */} />
    </div>
  )
}

Component Props

Prop	Type	Options	Description	Default
shape	avatar | image | text	Optional	Image shape style	text
width	Number	Optional	Image width	300
height	Number	Optional	Image height	300
bgColor	String	Optional	Image background color	#e5e5e5
fgColor	String	Optional	Image foreground color	#f9f9f9
placeholder	String	Optional	Text placeholder	width x height
fontFamily	String	Optional	Text font family	sans-serif
style	React.CSSProperties	Optional	CSS style prop	maxWidth: '100%', height: 'auto'
className	String	Optional	className prop	dummy-img
alt	String	Optional	Alt prop	dummy-img

---

Hook

import React from 'react'
import { useDummyImage } from 'react-simple-placeholder-image'

const MyComponent = () => {
  const image = useDummyImage({
    /* Config */
  })

  return (
    <div className='App'>
      ...
      <img src={image} alt='dummy-img' />
      ...
    </div>
  )
}

Hook Config

Prop	Type	Options	Description	Default
shape	avatar | image | text	Optional	Image shape style	text
width	Number	Optional	Image width	300
height	Number	Optional	Image height	300
bgColor	String	Optional	Image background color	#e5e5e5
fgColor	String	Optional	Image foreground color	#f9f9f9
placeholder	String	Optional	Text placeholder	width x height
fontFamily	String	Optional	Text font family	sans-serif

License

MIT © awran5