DOCSEARCHbyAlgolia
Submit Docs

React Doc Starter

website·Indexed 29 days ago

https://samonxian.github.io/react-doc-starter/

A documentation starter kit based on Docusaurus 2 designed for teams to document business components and utility libraries. It provides a solution for developing and showcasing React component libraries (based on antd 4.3.3+) and utility functions, featuring built-in components like PropsTable, CodeShow, and TsDoc to streamline the documentation process.

Tokens
7.7K
Snippets
48
Records
62
Agent score
72%

What's inside React Doc Starter

  1. Overview of React Doc Starter

    React Doc Starter is a development solution based on Docusaurus 2, optimized for teams to document internal business components and utility libraries. It uses Vite for bundling and requires Node.js version >= v16. Note: Automated documentation generation currently does not support internationalization (i18n); for i18n scenarios, documentation must be written manually following Docusaurus standards.

  2. Overview of React Doc Starter

    React Doc Starter is a development solution based on Docusaurus 2 designed for teams to document internal business components and utility libraries. It streamlines the process by providing integrated bundling via Vite and automated documentation generation from code comments.

    Requirements: Node.js version >= v16. Limitation: Automated documentation generation via comments does not currently support internationalization (i18n); manual documentation is required for those scenarios.

  3. Overview of React Doc Starter

    React Doc Starter is a solution based on Docusaurus 2 tailored for teams to document internal business components and utility libraries. It streamlines the development process by integrating Vite for bundling and providing specialized MDX components to automate documentation from source code.

    Requirements: Node.js version >= v16. Limitation: Automated documentation generation via comments does not currently support internationalization (i18n); for i18n, documentation must be written manually following Docusaurus standards.

  4. Overview of the customized Table component

    The Table component is a wrapper around the Ant Design (Antd) Table with several enhancements: columns with fixed properties do not need to be defined in order, empty data (null/undefined) is displayed as a placeholder character by default, columns can be hidden via configuration, and data does not wrap by default.

  5. Manage content visibility with ProContent status tips

    The ProContent component is used to wrap content and conditionally display status prompts. If any status tip is enabled, the child components will not be rendered. The display priority for these tips is as follows: Error Tip > Warning Tip > Success Tip > No Data Tip > Search Tip.

  6. Extend and customize the documentation site with React

    Because the site is built with React, developers can implement extensions and customizations by providing their own React components to fully control the browsing experience.

  7. Develop and build React Doc Starter locally

    To run the documentation site locally or build it for production, navigate to the website directory within the project.
    # Local Development
git clone https://github.com/samonxian/react-doc-starter.git
cd ./website
npm start
# Access via http://localhost:3000/

# Production Build
cd ./website
npm run build
# Static content is generated in the /build directory

  8. Deploy React Doc Starter to GitHub Pages

    The starter provides a convenient deployment command that builds the site and pushes it to the gh-pages branch. Run this from the website directory.
    # Using SSH
cd ./website
USE_SSH=true npm run deploy

# Without SSH
cd ./website
GIT_USER=<your-github-username> npm run deploy

  9. Create and manage fullscreen mode with createFullscreen

    The createFullscreen utility provides a cross-browser compatible way to trigger and manage fullscreen mode for a specific DOM element. It handles the various browser-specific implementations of the Fullscreen API. When using this in React components, it is recommended to use the useFullScreen hook instead. To prevent memory leaks or duplicate event bindings, always call the remove() method to clear previous listeners before creating a new binding or within a component's cleanup/destroy hook.
    const fullscreenObj = createFullscreen(
  targetDOM,
  targetDOM.ownerDocument || document,
  () => {
    const isFull = !!fullscreenObj.fullscreenElement;
    if (!isFull) {
      // Not in fullscreen, remove the listener
      fullscreenObj.remove();
    }
  }
);

if (fullscreenObj.isDomFullscreenSupported) {
  const isFull = !!fullscreenObj.fullscreenElement;
  if (!isFull) {
    fullscreenObj.requestFullscreen();
  } else {
    fullscreenObj.exitFullscreen();
  }
} else {
  // Handle unsupported browser
}

  11. Develop and deploy React Doc Starter locally

    Follow these steps to set up the development environment, build the static site, and deploy to GitHub Pages.
    # Local Development
git clone https://github.com/samonxian/react-doc-starter.git
cd ./website
npm start
# Access at http://localhost:3000/

# Build Static Site
cd ./website
npm run build
# Output is generated in the /build directory

# Deploy to GitHub Pages (via SSH)
cd ./website
USE_SSH=true npm run deploy

# Deploy to GitHub Pages (without SSH)
cd ./website
GIT_USER=<your-github-username> npm run deploy

  12. Use specialized components for React and Utils documentation

    The react-doc-starter provides a unified way to display business components and utility library documentation. Most documentation scenarios can be handled using three primary components: PropsTable, CodeShow, and TsDoc.