Skip to content

awran5/react-simple-placeholder-image

Repository files navigation

React Simple Placeholder Image

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

NPM JavaScript Style Guidenpm bundle sizeGitHub

screenshot

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

screenshot screenshot screenshot screenshot screenshot


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

Edit react-simple-placeholder-image

License

MIT © awran5