Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://react-styleguidist.js.org/docs/documenting below:

Documenting components | React Styleguidist

Styleguidist generates documentation for your components based on the comments in your source code, propTypes declarations, and Readme files.

See examples of documented components in our demo style guide.

Styleguidist will display your components’ JSDoc comment blocks. Also, it will pick up props from propTypes declarations and display them in a table.

import React from 'react'

import PropTypes from 'prop-types'

export default class Button extends React.Component {

static propTypes = {

foo: PropTypes.number,

baz: PropTypes.oneOfType([PropTypes.number, PropTypes.string])

}

static defaultProps = {

foo: 42

}

render() {

}

}

Component’s PropTypes and documentation comments are parsed by the react-docgen library. They can be modified using the updateDocs function.

Styleguidist will look for any Readme.md or ComponentName.md files in the component’s folder and display them. Any code block with a language tag of js, jsx, or javascript will be rendered as a React component with an interactive playground. For backwards compatibility, code blocks without a language tag are also rendered in this way. It is recommended to always use the proper language tag for new documentation.

React component example:

```js

<Button size="large">Push Me</Button>

```

You can add a custom props to an example wrapper:

```js { "props": { "className": "checks" } }

<Button>I’m transparent!</Button>

```

Or add padding between examples in a block by passing the `padded` modifier:

```jsx padded

<Button>Push Me</Button>

<Button>Click Me</Button>

<Button>Tap Me</Button>

```

Or disable an editor by passing a `noeditor` modifier:

```jsx noeditor

<Button>Push Me</Button>

```

To render an example as highlighted source code add a `static` modifier:

```jsx static

import React from 'react';

```

Examples with all other languages are rendered only as highlighted source code, not an actual component:

```html

<Button size="large">Push Me</Button>

```

Any [Markdown](http://daringfireball.net/projects/markdown/) is **allowed** _here_.

If you need to display some JavaScript code in your documentation that you don’t want to be rendered as an interactive playground you can use the static modifier with a language tag (e.g. js static).

Additional example files can be associated with components using @example doclet syntax.

The following component will also have an example loaded from the extra.examples.md file:

export default class Button extends React.Component {

}

By default, any methods your components have are considered to be private and are not published. Mark your public methods with JSDoc @public tag to get them published in the docs:

By default, all props your components have are considered to be public and are published. In some rare cases, you might want to remove a prop from the documentation while keeping it in the code. To do so, mark the prop with JSDoc @ignore tag to remove it from the docs:

MyComponent.propTypes = {

hiddenProp: React.PropTypes.string

}

Use @visibleName JSDoc tag to define component names that are used in the Styleguidist UI:

class Button extends React.Component {

The component will be displayed with a custom “The Best Button Ever 🐙” name and this will not change the name of the component used in the code of your app or Styleguidist examples.

You can use the following JSDoc tags when documenting components, props and methods:

• @deprecated
• @see, @link
• @author
• @since
• @version

When documenting props you can also use:

• @param, @arg, @argument

All tags can render Markdown.

class Button extends React.Component {

static propTypes = {

children: PropTypes.string.isRequired,

color: PropTypes.string,

size: PropTypes.oneOf(['small', 'normal', 'large']),

width: PropTypes.number,

onClick: PropTypes.func

}

}

Code examples in Markdown use ES6+JSX syntax. You can use the current component without explicitly importing it:

To use other components, you need to explicitly import them:

import Button from '../Button'

;<Panel>

<p>

Using the Button component in the example of the Panel component:

</p>

<Button>Push Me</Button>

</Panel>

You can also import other modules, like mock data:

import mockData from './mocks'

;<Message content={mockData.hello} />

Or you can explicitly import all your example dependencies, to make examples easier to copy into your app code:

import React from 'react'

import Button from 'rsg-example/components/Button'

import Placeholder from 'rsg-example/components/Placeholder'

rsg-example module is an alias defined by the moduleAliases config option.

You can only use import by editing your Markdown files, not by editing the example code in the browser.

Each example acts as a function component and you can use the useState Hook to handle its state.

const [isOpen, setIsOpen] = React.useState(false)

;<div>

<button onClick={() => setIsOpen(true)}>Open</button>

<Modal isOpen={isOpen}>

<h1>Hallo!</h1>

<button onClick={() => setIsOpen(false)}>Close</button>

</Modal>

</div>

If a component uses React Context, you need a context provider in the example or in a custom Wrapper component. See ThemeButton example.

If you need a more complex demo it’s often a good idea to define it in a separate JavaScript file and import it in Markdown.

In some cases Styleguidist may not understand your components, see possible solutions.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4