react-hook-previewer

An image preview component based on React Hook.

Usage no npm install needed!

<script type="module">
  import reactHookPreviewer from 'https://cdn.skypack.dev/react-hook-previewer';
</script>

README

react-hook-previewer

An image preview component based on React Hook.

Install

Using npm

npm install react-hook-previewer --save-dev

Usage

ESM usage

import usePreviewer from 'react-hook-previewer'

const [previewer, openPreviewer] = usePreviewer()
return (
    <div>
        <img src={url} onClick={() => openPreviewer(url)}/>
        {previewer}
    </div>
)

Description

previewer => {React DOM Element} image previewer component.

openPreviewer(url)

  • url => {String} image url. If you want to open the previewer, you must pass a valid url.(required)

Tips

If you want to close the previewer, you can click anywhere on the screen.

License

react-hook-previewer is MIT licensed.