Currently work in progress...more functionalities and customizations will arrive soon!
npm install --save react-filetree
const action = (event) => {
console.log('action', event)
}
const data = [
{
id: '0',
name: 'Folder 1',
children: [
{
id: '1',
name: 'File 1 in Folder 1',
action,
}, {
id: '2',
name: 'File 2 in Folder 2',
action,
},
],
}, {
id: '3',
name: 'Empty Folder',
children: [],
}, {
id: '4',
name: 'Folder 2',
children: [
{
id: '5',
name: 'File 1 in Folder 2',
}, {
id: '6',
name: 'File 2 in Folder 2',
action,
}, {
id: '7',
name: 'File 3 in Folder 2',
},
],
}, {
id: '8',
name: 'File in root',
},
];
export default data;
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>React File Tree</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
import { FileTree } from 'react-filetree';
import data from './data.js';
ReactDOM.render(
<FileTree
data={data}
/>,
document.getElementById('root'),
);
This project is licensed under the MIT License - see the LICENSE.md file for details