https://github.com/awran5/react-simple-placeholder-image

A Minimal lightweight react component for adding a nice image placeholder
https://github.com/awran5/react-simple-placeholder-image

dummy-images image-placeholder react react-component react-typescript reactjs

Last synced: 13 days ago
JSON representation

A Minimal lightweight react component for adding a nice image placeholder

• Host: GitHub
• URL: https://github.com/awran5/react-simple-placeholder-image
• Owner: awran5
• License: mit
• Created: 2021-10-02T02:05:16.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-10-08T15:00:29.000Z (about 2 years ago)
• Last Synced: 2024-10-12T10:11:11.789Z (27 days ago)
• Topics: dummy-images, image-placeholder, react, react-component, react-typescript, reactjs
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-simple-placeholder-image
• Size: 511 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Simple Placeholder Image

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

[![NPM](https://img.shields.io/npm/v/react-simple-placeholder-image.svg)](https://www.npmjs.com/package/react-simple-placeholder-image) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)![npm bundle size](https://img.shields.io/bundlephobia/min/react-simple-placeholder-image)![GitHub](https://img.shields.io/github/license/awran5/react-simple-placeholder-image)



  



## Install

#### npm

```sh

npm i react-simple-placeholder-image

```

#### Yarn

```sh

yarn add react-simple-placeholder-image

```

---

### Examples

```jsx

import React from 'react'

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

const MyComponent = () => {

  return (

    


      

      

      

      

      

    

  )

}

```







  

  

  

  

  






## Component

```jsx

import React from 'react'

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

const MyComponent = () => {

  return (

    


      

    

  )

}

```





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

```jsx

import React from 'react'

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

const MyComponent = () => {

  const image = useDummyImage({

    /* Config */

  })

  return (

    


      ...

      

      ...

    

  )

}

```


## 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](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-simple-placeholder-image-wu12s?fontsize=14&hidenavigation=1&theme=dark)

### License

MIT © [awran5](https://github.com/awran5/)