Readme Jsx Save

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...

NOTICE: This file was generated with this library, you can checkout the sourecode by viewing the README.jsx file

npm i --save-dev readme-jsx

// ./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>
)

// ./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

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

const CustomHeader = ({ title, color }) => (
  <h1 className="custom-header" style={{ WebkitTextFillColor:color }}>{title}</h1>
)
module.exports = (
  <React.Fragment>
    <style>
    @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap');
    .custom-header{
      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: black;
       color:red;
      font-family: Pacifico;
      width: 880px;
      font-size: 3em;
      padding: 0px 0px 10px 10px;
      display: flex;
      margin: 0px;
      align-items: center;
    }
    </style>
    <CustomHeader title={metadata.name} color="yellow"/>
  </React.Fragment>
)

// ./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

Component	Props	Description	Example	Preview
H1		A basic markdown header	<H1>A header</H1>	# A header
H2		A basic markdown header	<H2>A header</H2>	## A header
H3		A basic markdown header	<H3>A header</H3>	### A header
H4		A basic markdown header	<H4>A header</H4>	#### A header
H5		A basic markdown header	<H5>A header</H5>	##### A header
H6		A basic markdown header	<H6>A header</H6>	##### A header
ITALIC		Turns text italic	<ITALIC>Italic</ITALIC>	Italic
BOLD		Turns text bold	<BOLD>Bold</BOLD>	Bold
SCRATCH		Strikes the text	<SCRATCH>Scratched</SCRATCH>	Scratched
BR		A line break	<BR/>	Doesn't show inside a table
HR		A horizontal line	<HR/>	---
QUOTE		A quote	<QUOTE>A thought here</QUOTE>	Doesn't show inside a table
OL	list: { title: string, content: string[]}[]	An ordered list	<OL list={[{title: "First item", content: ["Lorem ipsum","Lorem ipsum"]}]} />	Doesn't show inside a table
UL	list: { title: string, content: string[]}[]	An unordered list	<UL list={[{title: "First item", content: ["Lorem ipsum","Lorem ipsum"]}]} />	Doesn't show inside a table
CODE	`inline: boolean	lang: string`	A code snippet	<CODE lang="shell">{"npm i readme-jsx"}</CODE>
A	href: string	A link	<A href="https://google.com">Click me</A>	Click me
TASKS	list: {title: string, done: boolean}[]	A list of tasks	<TASKS list={[{title: "Refactor", done: false}, {title: "Go to sleep", done: false}]} />	Doesn't show inside a table
COLLAPSIBLE	title: string	A collapsible aka accordion	<COLLAPSIBLE title="Show the content">The content</COLLAPSIBLE>	Show the content The content
TABLE	columns: string[]; rows: string[][];	A table, like this one	<TABLE columns=["Fruit", "Color"] rows={[["Banana", "Yellow"],["Watermelon","Green"]]}/>	Doesn't show inside a table
IMG	src: string ; href: string ; alt: string	An image	<IMG src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Nuvola_emblem-favorite.svg/800px-Nuvola_emblem-favorite.svg.png"/>
BADGE	label: string; message: string; link: string; color: string; style: "plastic" or "flat" or "flat-square" or "for-the-badge" or "social"; logo: string; logoColor: string; labelColor: string;	A custom badge	<BADGE label="HELLO" message="WORLD" style="for-the-badge" color="orange" />