react-forest

react-forest

A simple React file structure viewer.

Usage:

Simply use the tag <Forest /> in a React app.

The Forest component requires a data parameter, which can either be an array of folders and files or a dictionary signifying a root folder with child elements.

All folders must have a boolean property titled folder and have it set to true. Non-empty folders should also have a property children, which should be an array of files. Files should not have a folder property, but are required to have a url property containing a link to the file. All files and folders must have a name property.

Dict Example:

{
    "name": "TestRootFolder",
    "folder": true,
    "children": [
        {
            "name": "TestFile",
            "url": "https://example.com/TestFile"
        },
        {
            "name": "TestSubFolder1",
            "folder": true,
            "children": [
                // etc
            ]
        }
    ]
}

Array Example:

[
    {
        "name": "TestFile",
        "url": "https://example.com/TestFile"
    },
    {
        "name": "TestFolder1",
        "folder": true,
        "children": [
            {
                "name": "TestFile2",
                "url": "https://example.com/TestFile2"
            }
        ]
    },
    {
        "name": "TestFolder2",
        "folder": true,
        "children": [
            // empty
        ]
    }
]