3D Periodic Table using Three JS

Three JS is a fun library to play with. I'll show you how to create a 3D Periodic Table using React.

NextJS logo

You will want to use the next/image component to do this and it's not very easy using remark. This is where react-markdown comes to the rescue.

Firstly, install react-markdown using your favorite package manager:

# npm
npm install react-markdown
# yarn
yarn add react-markdown

Once installed, you can now parse the markdown content and pass chunks to your components:

import rmd from "react-markdown";

const parseContent = (content) => {
  return {
    something: "here"
  };
};