How to generate beautiful README documentations with README-JSX

Rachid Daoudi — Fri, 11 Oct 2019 16:42:19 +0000

README-JSX is a package that lets you write your README documentations in jsx, opening a multitude of new possibilities and oppurtinities to get creative. Not only that, but it also provides you with all the necessary components for writing traditional markdown without having to struggle with spacing and formatting...

Installation

You install the package as a dev dependecy like so npm i -D readme-jsx

Usage

You then create a README.jsx file in the root folder, and proceed to write your jsx code, note that metadata allows you to parse your package.json file properties:

// README.jsx
const React = require("react");
const { BADGE, metadata} = require("readme-jsx");

module.exports = (
  <React.Fragment>
    <BADGE 
    label="LICENSE" 
    message={metadata.license} 
    style="for-the-badge" 
    color="blue" />
  </React.Fragment>
)

Generating README.md

Finally, you launch your script which will generate the README documentation for you:

// /scripts/readme-gen.js
const { generateMD } = require("readme-jsx");
generateMD("./README.jsx").then(() => {
  console.log("README.md generated !");
  process.exit();
});
)

node ./scripts/readme-gen.js

Results

Conclusion