Skip to main content

Library Usage

Import
import { componentsToMarkdown } from 'components-to-markdown';
Main function
async function componentsToMarkdown(options: ConfigOptions);

ConfigOptions​

sources​

Type
string[]

Source directories for the React components.

patterns​

Type
string[]
Default
[
  '**/*.{js,jsx,ts,tsx}',
  '!**/__tests__/**',
  '!**/*.{test,spec}.{js,jsx,ts,tsx}',
  '!**/*.d.ts',
];

A glob pattern to filter the files in sources .

output​

Type
string;

Path to output markdown files.

template​

Type
BuiltinTemplate | string;
Default
'brachiosaurus';

Path to template file or the name of the built-in template.

watch​

Type
boolean;
Default
false;

Whether to watch the files for changes and regenerate.

loglevel​

Type
LogLevel;
Default
'info';

Log level. See LogLevel for more information.

grouped​

Type
boolean;
Default
false;

Components in the same file will be grouped in the same output file.

outputExtension​

Type
string;
Default
'md';

Extension of output files.

hooks​

Type
ConfigHook;

Functions to customize the result. See ConfigHook for more information.

helpers​

Type
TemplateHelper;
Default
[];

Custom template helpers. See TemplateHelper for more information.

BuiltinTemplate​

type BuiltinTemplate = 'brachiosaurus' | 'stegosaurus';

LogLevel​

type LogLevel = 'silent' | 'error' | 'warn' | 'info' | 'debug' | 'trace';
PriorityLevelDescription
0silentNo logs will be displayed
1errorCritical errors
2warnAlerts about possible issues
3infoDefault log information
4debugDetails about file processing
5traceDetailed information for each step

ConfigHook​

outputFileName​

(fileName: string, fileExtension: string) => string;

Used to format the name of output files.

Example
function outputFileName(fileName, fileExtension) {
  return `${fileName}.${fileExtension}`;
}

It is possible to define directories to be concatenated with output dir. For example:

const groups = {
  Button: 'Inputs',
  Select: 'Inputs',
  Alert: 'Feedback',
  Snackbar: 'Feedback',
};

/**
 * Result:
 * "Inputs/Button.md"
 * "Inputs/Select.md"
 * "Feedback/Alert.md"
 * "Feedback/Snackbar.md"
 */
function outputFileName(fileName, fileExtension) {
  return `${groups[filename]}/${fileName}.${fileExtension}`;
}

moduleName​

(filePath: string, metadata: ModuleNameMetadata) => string;

Used to extract the module name. This function will populate the ComponentData.name property.

This name will be use as the output file name if grouped is true.

Example
import { parse } from 'path';

function moduleName(filePath) {
  return parse(filePath).name;
}

TemplateHelper​

import type { HelperDelegate } from 'handlebars';

interface TemplateHelper {
  name: string;
  helper: HelperDelegate;
}