• Stars
    star
    137
  • Rank 266,053 (Top 6 %)
  • Language
    TypeScript
  • Created almost 8 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

πŸ“ Simple documentation for your React components

Component Docs

Build Status [![Code Coverage][coverage-badge]][coverage] MIT License Version Styled with Linaria

πŸ“ Simple documentation for your React components.

Goals

  • Simple API with minimal configuration
  • Fully static, deployable on GitHub pages
  • Both server + client routing
  • Optimized for mobile screens
  • Improved DX with useful features like hot reload
  • Supports rendering React Components as well as markdown and MDX files
  • Support including markdown from a file reference in markdown files

Installation

yarn add --dev component-docs

Configuration

You can specify the configuration using a JavaScript, JSON or YAML file. This can be in form of:

  • component-docs.config.js JS file exporting the object (recommended).
  • component-docs property in a package.json file.
  • .component-docs file with JSON or YAML syntax.
  • .component-docs.json, .component-docs.yaml, .component-docs.yml, or .component-docs.js file.

Example component-docs.config.js:

module.exports = {
  port: 1234,
  pages: [
    { type: 'md', file: path.resolve(__dirname, 'index.md') },
    { type: 'md', file: path.resolve(__dirname, 'guide.md') },
  ],
};

Options

The configuration object can contain the following properties:

  • pages (required): An array of items or a function returning an array of items to show as pages
  • root: The root directory for the project.
  • output: Output directory for generated files.
  • assets: Directories containing the asset files.
  • styles: Additional CSS files to include in the HTML.
  • scripts: Additional JS files to include in the HTML.
  • logo: Logo image from assets to show in sidebar.
  • colors: Colors to use in the page. This is implemented using CSS variables and falls back to default grey colors on IE.
    • primary: Primary color used in highlighted items, links etc.
  • github: Link to github folder to show edit button.
  • port: Port to run the server on.
  • open: Whether to open the browser window.

Format for pages

Each item in your pages array can contain 3 properties:

  • type (required): md for markdown files, mdx for MDX files, component to extract component documentation using react-docgen or custom to render provided file as a React component.
  • file (required): absolute path to the file.
  • group: A heading to group this item under. By default, grouping is done for component documentation pages with a dot (.) in the name. You can pass null here to disable this behavior.

CLI

To serve docs with your config, run:

yarn component-docs serve

You can also specify a glob of files to use as pages:

yarn component-docs serve "*.{md,mdx}"

The CLI accepts several arguments. See --help for details.

API

If you want to use component-docs programmatically, you can use the exported serve and build functions.

Example:

import path from 'path';
import { build } from 'component-docs';

const pages = [
  { type: 'md', file: '../docs/Get Started.md' },
  { type: 'mdx', file: '../docs/Contributing.mdx' },
  { type: 'separator' },
  { type: 'component', file: '../src/Button.js', }
  { type: 'component', file: '../src/Calendar.js' },
];

build({
  pages: pages.map(page => ({ ...page, file: path.join(__dirname, page.file) })),
  output: path.join(__dirname, 'pages'),
});

The serve and build functions accept the same options object that's used for the configuration file. If a configuration file already exists, the options will be merged.

Extras

MDX support

MDX is a format that lets you seamlessly use JSX in your Markdown documents. This allows you to write your documentation using markdown and have interactive React components inside the documentation.

File references in Markdown

You can refer to another markdown file and the content of the markdown file will be inlined. When a line starts with a / and ends in .md, we recognize it as a file reference.

For example:

## Some heading

​/../Details.md

Some more text here.

Here, there is a reference to the ../Details.md file. Its content will be inlined into the markdown file where it's referenced.

Specifying metadata

Documents can specify metadata such as the page title, description and link to use. The methods vary according to the type of the document.

For markdown documents, metadata can be specified in the YAML front-matter:

---
title: Home
description: This is the homepage.
link: index
---

For MDX and React documents, metadata can be exported as a named export named meta:

export const meta = {
  title: 'Home',
  description: 'This is the homepage.',
  link: 'index',
};

Example

component-docs is used for react-native-paper

More Repositories

1

react-native-paper

Material Design for React Native (Android & iOS)
TypeScript
12,811
star
2

linaria

Zero-runtime CSS in JS library
TypeScript
11,659
star
3

haul

Haul is a command line tool for developing React Native apps, powered by Webpack
TypeScript
3,643
star
4

react-native-testing-library

πŸ¦‰ Simple and complete React Native testing utilities that encourage good testing practices.
TypeScript
3,078
star
5

react-native-builder-bob

πŸ‘·β€β™‚οΈ Simple set of CLIs to scaffold and build React Native libraries for different targets
JavaScript
2,771
star
6

react-native-pager-view

React Native wrapper for the Android ViewPager and iOS UIPageViewController.
TypeScript
2,711
star
7

repack

A Webpack-based toolkit to build your React Native application with full support of Webpack ecosystem.
TypeScript
1,471
star
8

reassure

Performance testing companion for React and React Native
TypeScript
1,269
star
9

react-native-slider

React Native component exposing Slider from iOS and SeekBar from Android
TypeScript
1,189
star
10

react-native-ios-kit

The missing React Native UI Kit for iOS
JavaScript
521
star
11

react-theme-provider

A set of utilities that help you create your own React theming system in few easy steps
JavaScript
466
star
12

react-native-fbads

Facebook Audience SDK integration for React Native
Java
439
star
13

super-app-showcase

Monorepository template for super app development with React Native and Re.Pack
JavaScript
413
star
14

react-native-image-editor

A library providing an API for cropping images from the web and the local file system.
Kotlin
373
star
15

react-native-brownfield

Set of helpers to make your brownfield integration smooth and easy.
Kotlin
241
star
16

react-native-paper-login-template

The easiest way to start with your application.
TypeScript
239
star
17

react-native-opentok

React Native OpenTok
Objective-C
202
star
18

react-native-open-source-board

OSS board with triaged React Native issues.
125
star
19

async-storage

Cross platform storage for React, built on top of AsyncStorage
JavaScript
109
star
20

react-native-material-palette

Bringing Material Palette API to React Native
JavaScript
105
star
21

ts-regex-builder

Maintainable regular expressions for TypeScript and JavaScript.
TypeScript
83
star
22

react-native-multibundle

JavaScript
57
star
23

eslint-config-callstack

ESLint preset extending Flow, Prettier and Jest
JavaScript
52
star
24

repack-examples

Repository with examples for Re.Pack
Java
50
star
25

ai-meeting-transcription

AI Tool for meeting transcriptions
Jupyter Notebook
36
star
26

react-native-socket-mobile

React Native module for the Socket Mobile SDK.
JavaScript
35
star
27

web3-react-native-dapp-wagmi

TypeScript
30
star
28

fabric-library-with-custom-cpp-example

Add custom cpp state to your fabric library
Java
29
star
29

super-app-example

This repository presents a compact super-app example from Callstack's blog, illustrating the use of a monorepo structure together with Re.Pack and Module Federation.
Java
27
star
30

hapi-graphql-boilerplate

JavaScript
26
star
31

react-native-detox-example

Example integration of Detox and Jest
Objective-C
23
star
32

linaria-styled

Zero-runtime CSS in JS library for building React components
18
star
33

web3-cross-platform-dapp

TypeScript
17
star
34

parcel-plugin-linaria

Parcel plugin for Linaria (Experimental)
JavaScript
17
star
35

benz-ql

GraphQL server for the Mercedes APIs
JavaScript
16
star
36

generator-node-module

A Yeoman module to author Node libraries with Prettier, Jest, Flow and Babel.
JavaScript
16
star
37

react-native-snapshot-tests

An example of snapshot testing with React Native
Objective-C
16
star
38

delightful-ux-training-app

JavaScript
15
star
39

universal-react-app

JavaScript
12
star
40

workshop-navigation

Navigation in React Native workshop.
JavaScript
12
star
41

ai-cli

AI assistant in your terminal.
TypeScript
11
star
42

github-comment-bot

JavaScript
10
star
43

news-mini-app-showcase

JavaScript
9
star
44

ReactNativeNotes

Notes demo application showing the abilities of React Native for desktop connected with UWP development
TypeScript
9
star
45

talk-universal-react

JavaScript
8
star
46

ai-summarization

AI summarization tool
Jupyter Notebook
7
star
47

react-native-releases-script

Script to generate changelog for RN releases
7
star
48

web3-react-native-dapp-viem

TypeScript
6
star
49

callstack-hackathon-team-ferran

callstack-hackaton-team-ferran
JavaScript
5
star
50

callstack-hackathon-team-dratwa-wojtek

JavaScript
3
star
51

reassure-examples

Examples for Reassure setup with different frameworks.
JavaScript
3
star
52

web3-react-native-testing

Best practices for testing React Native web3 dapps
TypeScript
3
star
53

DMAIC-Performance-Workshop

Dedicated app for the DMAIC Performance Workshop
TypeScript
2
star
54

.github

Templates for all Callstack OSS projects
2
star
55

react-native-paper-codemod

JavaScript
2
star
56

web3-react-native-siwe

Sign-In With Ethereum (SIWE) implementation in React Native
TypeScript
2
star
57

AppleVisionBGFX

Usage of BGFX in visionOS
C++
2
star
58

sample-weather-app

JavaScript
1
star
59

callstack.github.io

Organisation Github Page
HTML
1
star
60

react-native-visionos-docs

Documentation website for react-native-visionos
JavaScript
1
star
61

workshop-universal-sunshine

Universal React Native & React app based on Sunshine: https://github.com/udacity/Sunshine-Version-2
1
star