Nightly Procrastination Machine

    react-simple-placeholder-image
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    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

    Install

    npm i react-simple-placeholder-image

    DownloadsWeekly Downloads

    73

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    13.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • awran5