{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/building-a-react-folder-tree-component","result":{"data":{"markdownRemark":{"excerpt":"Hey folks! I hope you are doing fine in this pandemic situation, Today we will be creating a Folder Tree Component in\nReactjs from scratch…","html":"

Hey folks! I hope you are doing fine in this pandemic situation, Today we will be creating a Folder Tree Component in\nReactjs from scratch.

\n

Designing the API

\n

Before creating any type of component in reactjs you should 1st design how the API would look like and then write the\nneccessary code to make it work.

\n

Our Folder Tree Component will have two APIs

\n\n

At first we will tackle the Declarative API which is really simple to create,
\nand in the second section we will do the Imperative API with recursive components.

\n

Declarative API

\n

The declarative API would look something like this :-

\n
import Tree from './Tree';\n\nconst App = () => {\n  return (\n    <div>\n      <Tree>\n        <Tree.Folder name=\"src\">\n          <Tree.Folder name=\"Components\">\n            <Tree.File name=\"Modal.js\" />\n            <Tree.File name=\"Modal.css\" />\n          </Tree.Folder>\n          <Tree.File name=\"index.js\" />\n          <Tree.File name=\"index.html\" />\n        </Tree.Folder>\n        <Tree.File name=\"package.json\" />\n      </Tree>\n    </div>\n  );\n};
\n

As you can see we will have total of three components to work with

\n\n

Imperative API

\n

Declarative APIs are simple & easier for users to structure the Tree, but in real world scenarios we will have a JSON\nObject representing the Folder Tree and we need to render that with the Imperative API.

\n
import Tree from './Tree';\n\nconst structure = [\n  {\n    type: \"folder\",\n    name: \"src\",\n    childrens: [\n      {\n        type: \"folder\",\n        name: \"Components\",\n        childrens: [\n          { type: \"file\", name: \"Modal.js\" },\n          { type: \"file\", name: \"Modal.css\" }\n        ]\n      },\n      { type: \"file\", name: \"index.js\" },\n      { type: \"file\", name: \"index.html\" }\n    ]\n  },\n  { type: \"file\", name: \"package.json\" }\n];\n\nconst App = () => {\n  return (\n    <div>\n      <Tree data={structure} />\n    </div>\n  );\n};
\n

As you can see we have a JSON representation of the same tree we have in our declarative API.
\nIts an Array of Objects and each object has three properties

\n\n

And we just passed this structure to our <Tree /> component which will handle the rendering, we will cover the\nImperative API later in the post but let us first finish our Declerative API

\n
\n

The Tree Component

\n

Lets first install styled-components for styling our Components.

\n
npm install styled-components
\n

Our Tree component will be very simple it will only have some basic styling, it is so simple i don't even have to\nexplain it.

\n
const StyledTree = styled.div`\n  line-height: 1.5;\n`;\n\nconst Tree = ({ children }) => {\n  return <StyledTree>{children}</StyledTree>;\n};
\n

The File Component

\n

In our File component we will also have a File Icon with some basic styling.

\n

Lets install react-icons and import our File Icon

\n
npm install react-icons
\n
import { AiOutlineFile } from 'react-icons/ai';\n\nconst StyledFile = styled.div`\n  padding-left: 20px;\n  display: flex;\n  align-items: center;\n  span {\n    margin-left: 5px;\n  }\n`;\n\nconst File = ({ name }) => {\n  return (\n    <StyledFile>\n      <AiOutlineFile />\n      <span>{name}</span>\n    </StyledFile>\n  );\n};
\n

We have a 20px padding left to push the Component to the right a little bit, and display flex properties to align the\nicon & span correctly.

\n

Thats fine but that generic file icon does not look good, does it? lets change that.
\nWe will make a map of extension icons and depending on the file extension we will give the file appropriate icon.

\n
import { DiJavascript1, DiCss3Full, DiHtml5, DiReact } from 'react-icons/di';\n\nconst FILE_ICONS = {\n  js: <DiJavascript1 />,\n  css: <DiCss3Full />,\n  html: <DiHtml5 />,\n  jsx: <DiReact />,\n};\nexport default FILE_ICONS;
\n

And in the File component we will extract the extension from the name of the file and use that to render the icon

\n
import FILE_ICONS from './FileIcons';\n\nconst File = ({ name }) => {\n  // get the extension\n  let ext = name.split('.')[1];\n\n  return (\n    <StyledFile>\n      {/* render the extension or fallback to generic file icon  */}\n      {FILE_ICONS[ext] || <AiOutlineFile />}\n      <span>{name}</span>\n    </StyledFile>\n  );\n};
\n

It would look something like this.
\nHooray our File component is done, let's move on to Folder component

\n

\n \n \n \n \n \n \n
File Component With Icons
\n

\n

The Folder Component

\n

In the Folder component we will have

\n\n

Initially our Folder component is very simple, just the title and childrens.

\n
\n

btw if you dont know what that children prop is then heres some resources
\nA quick intro to React’s props.children
\nA deep dive into children in React

\n
\n
import { AiOutlineFolder } from 'react-icons/ai';\n\nconst StyledFolder = styled.div`\n  padding-left: 20px;\n\n  .folder--label {\n    display: flex;\n    align-items: center;\n    span {\n      margin-left: 5px;\n    }\n  }\n`;\n\nconst Folder = ({ name, children }) => {\n  return (\n    <StyledFolder>\n      <div className=\"folder--label\">\n        <AiOutlineFolder />\n        <span>{name}</span>\n      </div>\n      <div>{children}</div>\n    </StyledFolder>\n  );\n};
\n

And thats it, thats all we need for our Folder component but we also wanted the folders to be collapsible so lets add\nthat next.

\n

To add the collapse feature we will add a <Collapse /> Styled component and also add local state to keep track of\nisOpen state of our component.

\n
const StyledFolder = styled.div`\n  padding-left: 20px;\n\n  .folder--label {\n    display: flex;\n    align-items: center;\n    span {\n      margin-left: 5px;\n    }\n  }\n`;\nconst Collapsible = styled.div`\n  /* set the height depending on isOpen prop */\n  height: ${p => (p.isOpen ? 'auto' : '0')};\n  /* hide the excess content */\n  overflow: hidden;\n`;\n\nconst Folder = ({ name, children }) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const handleToggle = e => {\n    e.preventDefault();\n    setIsOpen(!isOpen);\n  };\n\n  return (\n    <StyledFolder>\n      <div className=\"folder--label\" onClick={handleToggle}>\n        <AiOutlineFolder />\n        <span>{name}</span>\n      </div>\n      <Collapsible isOpen={isOpen}>{children}</Collapsible>\n    </StyledFolder>\n  );\n};
\n

There we go! Our Folder Component is done, Yey!

\n

Finalizing Tree Component

\n

As you've noticed in our Declerative API design, we have <Tree.File /> & <Tree.Folder /> components we can just assign\nthe File & Folder component to our Tree's static methods.

\n
const Tree = ({ children }) => {\n  return <StyledTree>{children}</StyledTree>;\n};\n\nTree.File = File;\nTree.Folder = Folder;\n\n////////\n// DONE! Lets try it out\nimport Tree from './Tree';\n\nconst App = () => {\n  return (\n    <div>\n      <Tree>\n        <Tree.Folder name=\"src\">\n          <Tree.Folder name=\"Components\">\n            <Tree.File name=\"Modal.js\" />\n            <Tree.File name=\"Modal.css\" />\n          </Tree.Folder>\n          <Tree.File name=\"index.js\" />\n          <Tree.File name=\"index.html\" />\n        </Tree.Folder>\n        <Tree.File name=\"package.json\" />\n      </Tree>\n    </div>\n  );\n};
\n

If we run the code now we will have a working React Folder Tree Component! Congrats 🎉🎉

\n

Declerative Demo

\n

\n
\n

Imperative API

\n

OKAY! we are done with the Declerative API now lets work on the Imperative API.

\n

To create the Imperative API we need recursion!

\n
\n

If you are not familiar with recursion then check out some resources
\nA Quick Intro to Recursion in Javascript
\nIntro to Recursion in JS

\n
\n

In our <Tree /> component we accept the data props and added an isImperative flag.
\nIf we have the data prop and not the children that means the user is using the imperative api, and depending on that\nvariable we will be rendering the tree.

\n
const Tree = ({ data, children }) => {\n  const isImperative = data && !children;\n\n  return <StyledTree>{isImperative ? <TreeRecursive data={data} /> : children}</StyledTree>;\n};
\n

As you've noticed we also added a new component called <TreeRecursive /> which will recursively look through the JSON\nstructure and render those nested files/folders, Lets implement it.

\n
const TreeRecursive = ({ data }) => {\n  // loop through the data\n  return data.map(item => {\n    // if its a file render <File />\n    if (item.type === 'file') {\n      return <File name={item.name} />;\n    }\n    // if its a folder render <Folder />\n    if (item.type === 'folder') {\n      return (\n        <Folder name={item.name}>\n          {/* Call the <TreeRecursive /> component with the current item.childrens */}\n          <TreeRecursive data={item.childrens} />\n        </Folder>\n      );\n    }\n  });\n};
\n

Believe it or not, we are DONE! 🎉🎉 Run the code and see the magic!

\n

Imperative Demo

\n

\n

Phew! That was amazing isn't it? if you made it this far, give yourself a tap on the shoulder because you just built a React Folder Tree Component!

\n

Now for those who are looking for some more fun try to implement these features on your own :-

\n\n

Foot notes

\n\n

Thanks for reading the post, i hope you learned something and enjoyed it.
\nStay safe, stay home!
\nBye have a nice day!

","timeToRead":8,"id":"1fd6b671-b46d-53e7-bf51-a3324976648a","frontmatter":{"date":"April 29, 2020","title":"Building A React Folder Tree Component"}}},"pageContext":{"slug":"/blog/building-a-react-folder-tree-component"}},"staticQueryHashes":["1033876704","3435786681","550521386"]}