react-dockeep

React documentation keeper allows user to create documentation for their components and view them directly with custom configurations in their projects.

Get started

npm i react-dockeep

Then use it in your index.js (if using create-react-app)

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Doc from 'react-dockeep';

const CONFIG = {/* Your configurations here */}

ReactDOM.render(
  <React.StrictMode>
    <Doc config={CONFIG}>
      <App />
    </Doc>
  </React.StrictMode>,
  document.getElementById('root')
);

Props

Name	required	type	default	description
config	true	object		The config that controls the components and documentation
url	false	string	'doc'	The url that will be used to browse the components

Config

The documentation will be rendered based on the configuration provided, here are the fields that can be configured.

Name	required	type	default	description
components	true	array		A list of components with configuration

components

Name	required	type	default	description
component	true	function | class		The component that will be rendered
name	false	string	The given component's name	The name of the component
description	false	string	'No description'	The description of the component
props	false	array	[]	A list of props that will be applied to the component with documentation
code	false	string		The example code, please notice that the name of the tag must match the component name

props

Name	required	type	default	description
name	true	string		The name of the prop
value	true	string		The value of the prop
required	false	boolean	false	Whether this prop is required by the component or not
default	false	any		The default value of the prop
type	false	string	'any'	The type of the prop
doc	false	string	''	The documentation of this prop

Example

Here is a screenshot of the example:

The above documentation can be generated by the following config:

{
  component: Modal,
  description: "Wrapped the Modal component from React Bootstrap",
  props: [
    {
      name: "header",
      value: "",
      default: "",
      doc: "The header of the Modal, header will not be displayed if this is not given",
      type: "string"
    },
    {
      name: "body",
      value: "Hello World",
      required: true,
      doc: "Body of the modal",
      type: "string"
    },
    {
      name: "footer",
      value: "",
      default: "",
      doc: "The footer of the Modal, footer will not be displayed if this is not given",
      type: "string"
    },
  ]
}

To run examples use npm start and go to http://localhost:8080 in your browser, see examples folder for more information

TODO

v1.0.0

• Add example
• Prevent name duplications
• Improve add config using functions (Push to v1.1.0)
• Change all bootstrap elements to React Bootstrap
• Implement the search feature of the sidebar
• Proper warning and error display
• Figure out a way when user deleted required props and error is thrown (This only happens in react development mode)

v1.1.0

• Config using functions
• Allow users to handle routing by themselves (Push to v1.2.0)
• Allow users to write example code by themselves
• Allow users to control sections by themselves (Push to v1.2.0)