
Security News
NIST Under Federal Audit for NVD Processing Backlog and Delays
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
@codesmith-99/react-file-preview
Advanced tools
The url previewer is built using native html elements for previewing url of files of the following type
The url previewer is built using native html elements for previewing url of files of the following type
Also, for unsupported files or when an error occurs, it falls back to using an icon.
npm i @codesmith-99/react-file-preview
Currently, the file supports only urls, in the future hopefully it can be extended to files also.
Basic Usage
import React, { useState } from 'react'
import FileViewer from '@codesmith-99/react-file-preview'
export default function Demo() {
const [file, setFile] = useState<string>('')
const [mimeType, setMimeType] = useState<string>()
const [name, setName] = useState<string>('image.jpg')
return (
<>
<div>
<label>File url</label>
<br />
<input type='text' onChange={(e) => setFile(e.target.value)} />
</div>
<div>
<label>File mimeType</label>
<br />
<input type='text' onChange={(e) => setMimeType(e.target.value)} value={mimeType} />
</div>
<div>
<label>File name</label>
<br />
<input type='text' onChange={(e) => setName(e.target.value)} value={name} />
</div>
<div
style={{
height: '500px',
width: '500px',
}}
>
<FileViewer
loader={undefined}
mimeType={mimeType}
src={file}
onError={(e) => {
console.log(e)
}}
fileName={name}
/>
</div>
</>
)
}
Prop name | Type | Description |
---|---|---|
src | string | The url of the file to be previewed |
mimetype | string (optional) | Used to specify the mimetype of the file and determine how to preview the url, alternatively filename can be used |
filename | string (optional) | The file extension is used to specify the mimetype of the file and determine how to preview the url, alternatively mimetype can be used |
loader | ReactNode (optional) | A loader to replace the default loader used by the project |
onError | (e: any) => void (optional) | A callback that can be used to detect if an error has occurred in the loading of the files |
autoPlay | boolean | To autoplay a video or an audio |
containerErrorStyle | React.CSSProperties | The style of the container when an error occurs |
FAQs
The url previewer is built using native html elements for previewing url of files of the following type
The npm package @codesmith-99/react-file-preview receives a total of 189 weekly downloads. As such, @codesmith-99/react-file-preview popularity was classified as not popular.
We found that @codesmith-99/react-file-preview demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
Research
Security News
Socket’s Threat Research Team has uncovered 60 npm packages using post-install scripts to silently exfiltrate hostnames, IP addresses, DNS servers, and user directories to a Discord-controlled endpoint.
Security News
TypeScript Native Previews offers a 10x faster Go-based compiler, now available on npm for public testing with early editor and language support.