React-Nenav is a component for your React applications. It allow you to show a path and navigate inside it like a folder viewer. You can also open the files and show their contents.

React-Nenav is built with React, Redux and React-Redux. All style and external plugin to do syntax highlight can be included.

Live demo: NeckersBOX.github.io/react-nenav

To build the examples locally, run:

npm install
npm start

Then open localhost:8000 in a browser.

The easiest way to use react-nenav is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc).

You can also use the standalone build by including dist/react-nenav.js in your page. If you use this, make sure you have already included its dependencies, and they are available as a globals variables.

npm install react-nenav --save

You have to provide to Nenav component a files view and a function to call when the user wants to see the content of a file.

An example of a files view structure.

{
  /* root dir */
  data:
    /* root dir content */
    "dir_name": {
      type: "dir",
      data: {
        /* root/dir_name content */
        "dir_name": { ... }
        "dir_name": { ... }
        ...
        "file_name": { ... }
      }
    },
    "file_name": {
      type: "file",
      size: "size in byte",
      date: "last modified date, it will be show as is"
    },
    ... /* other files or directories*/
}

You can also generate a view like this with this PHP code:

<?php
  function path_data ($path) {
    $data = array ( 'type' => 'dir', 'data' => array () );

    if ( is_dir ($path) ) {
      if ( $dh = opendir ($path) ) {
        while ( ($file = readdir ($dh)) !== false ) {
            if ( $file == '.' or $file == '..' ) continue;

            if ( is_dir ($path.'/'.$file) ) {
              $data['data'][$file] = path_data ($path.'/'.$file);
            }
            else {
              $data['data'][$file] = array (
                'type' => 'file',
                'size' => filesize ($path.'/'.$file),
                'date' => date ("d-m-Y", filemtime($path.'/'.$file))
              );
            }
        }
        closedir($dh);
      }
    }

    return $data;
  }

  $path = '.';

  echo json_encode (path_data ($path));
?>

You have to provide as well a function to read a request file. This function will be like this:

const getFileData = (file_path, resultFunc) => {
  $.get ('getFile.php', { request: file_path },
    (result) => {
      ...
      resultFunc (result.file_contents);
    }
  );
}

This is another example in PHP to do this action:

<?php
  $path = '.'.some_security ($_GET['file']);

  function some_security ($path) {
    return implode ('/', array_diff (explode ('/', $path), array ('.', '..')));
  }

  echo file_get_contents ($path);
?>

Have done that you can immediatly use the Nenav in this way:

import Nenav from 'react-nenav';

<Nenav data={file_list} dataFunc={getFileData} />

Of course, the Nenav's configuration isn't only with data and dataFunc, you can personalize it much more.

Change style

Nenav has inside two configuration for its style, one for Zurb Foundation and one for Twitter Bootstrap. You can set them with the property style='foundation' or style='bootstrap'. You can also build your own style following this example ( the foundation's configuration ):

const exampleStyle = {
    main_area: "small-12",
  link: '',
    navbar: {
        area: "small-12",
      btn: "primary button",
    btn_group: "small button-group"
    },
    folder_view: {
        table: "table-scroll hover",
        name: 'text-left',
        type: 'text-right',
        size: 'text-right',
        date: 'text-center'
    },
  file: {
    main_area: 'callout',
    pre: 'prettyprint',
    date: 'subheader'
  },
  icon: {
    file: 'fi-page',
    folder: 'fi-folder',
    arrow_up: 'fi-arrow-up',
    arrow_down: 'fi-arrow-down',
    back: 'float-right fi-x'
  }
};

After you will use it with style={exampleStyle}.

Change initial path

You can set the initial path with: path='/my/path/sub_dir'.

Change initial sort

You can set also the initial sort with an object like this: { attr: attribute, type: sort_type }. attribute can be one of this name, type, size, date and sort_type can be asc or desc.

Add a function when file is shown

When a user open a file Nenav show it instead of the files list. When this action was executed you can specify a function to call ( example to highlight syntax with prettify ) in this way: fileMountFunc={my_function}

Summary

Inside the demo was used this configuration:

const nenav_conf = {
    path: '/src',
    data: path_data,
    data_sort: { attr: 'name', type: 'asc' },
    dataFunc: getFileData,
    fileMountFunc: PR.prettyPrint,
    style: 'foundation'
};

You can pass it to Nenav Component with: <Nenav {...nenav_conf} />. Note: When you want only the root path you don't have to use / but an empty string.

Default configuration

const initState = {
  path: '',
  style: foundationStyle,
  data: { data: {} },
  data_sort: {
    attr: 'type',
    type: 'asc'
  },
  dataFunc: console.log,
  list_type: 'dir',
  file_info: null,
  onMount: null
};