How to use react-keyed-file-browser - 5 common examples
To help you get started, we’ve selected a few react-keyed-file-browser examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
uptick / react-keyed-file-browser / demo-site / grouped-thumbnails.js View on Github 
import React from 'react'
import ReactDOM from 'react-dom'
import Moment from 'moment'
import FileBrowser, { FileRenderers, FolderRenderers, Groupers, Icons } from 'react-keyed-file-browser'
const mount = document.querySelectorAll('div.demo-mount-grouped-thumbnails')
ReactDOM.render(render() {
return (
)
}
}},
{
key: 'centipede.png',
modified: +Moment().subtract(0.5, 'hours'),
size: 1.5 * 1024 * 1024,
},
{
key: 'possum.png',
modified: +Moment().subtract(32, 'days'),
size: 545 * 1024,
},
]}
renderStyle="list"
headerRenderer={null}
group={Groupers.GroupByModifiedRelative}
fileRenderer={FileRenderers.ListThumbnailFile}
folderRenderer={FolderRenderers.ListThumbnailFolder}
/>,
mount[0]
){
key: 'centipede.png',
modified: +Moment().subtract(0.5, 'hours'),
size: 1.5 * 1024 * 1024,
},
{
key: 'possum.png',
modified: +Moment().subtract(32, 'days'),
size: 545 * 1024,
},
]}
renderStyle="list"
headerRenderer={null}
group={Groupers.GroupByModifiedRelative}
fileRenderer={FileRenderers.ListThumbnailFile}
folderRenderer={FolderRenderers.ListThumbnailFolder}
/>,
mount[0]
)size: 52 * 1024,
},
{
key: 'centipede.png',
modified: +Moment().subtract(0.5, 'hours'),
size: 1.5 * 1024 * 1024,
},
{
key: 'possum.png',
modified: +Moment().subtract(32, 'days'),
size: 545 * 1024,
},
]}
renderStyle="list"
headerRenderer={null}
group={Groupers.GroupByModifiedRelative}
fileRenderer={FileRenderers.ListThumbnailFile}
folderRenderer={FolderRenderers.ListThumbnailFolder}
/>,
mount[0]
)react-keyed-file-browser
Folder based file browser given a flat keyed list of objects, powered by React.
