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