https://github.com/dogma-io/babel-plugin-react-code-block
Display React functional examples with source code.
https://github.com/dogma-io/babel-plugin-react-code-block
babel babel-plugin block code example react sample tutorial
Last synced: 2 months ago
JSON representation
Display React functional examples with source code.
- Host: GitHub
- URL: https://github.com/dogma-io/babel-plugin-react-code-block
- Owner: dogma-io
- License: mit
- Created: 2018-01-07T17:08:37.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:50:48.000Z (about 3 years ago)
- Last Synced: 2025-02-14T11:07:39.820Z (12 months ago)
- Topics: babel, babel-plugin, block, code, example, react, sample, tutorial
- Language: JavaScript
- Size: 1.52 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# babel-plugin-react-code-block [![NPM][npm-img]][npm-url] [![Coverage][cov-img]][cov-url]
Display React functional examples with source code.
## Table of Contents
* [Installation](#installation)
* [Documentation](#documentation)
* [Code of Conduct](#code-of-conduct)
* [Contributing](#contributing)
* [License](#license)
## Installation
**npm**
```bash
npm install babel-plugin-react-code-block
```
**yarn**
```bash
yarn add babel-plugin-react-code-block
```
## Documentation
Create a code block component with a `code` property, which will be populated by this plugin:
```js
import React from 'react'
export default ({children, code}) => {
return (
{children}
{code}
)
}
```
> Note: In the above example component children is the passed in JSX that you want to render as a demo and code is the passed in JSX converted to a string so you can also print the code sample (which is run through prettier to make it look aesthetically pleasing).
In your Babel configuration include:
```js
module.exports = {
"plugins": [
[
"babel-plugin-react-code-block",
{
"component": "CodeBlock",
},
],
],
}
```
> Note: In the above configuration change `CodeBlock` to the name of your code block component. This plugin will simply apply the transform to any JSX elements matching the component name.
## Code of Conduct
Please see the [code of conduct](CODE_OF_CONDUCT.md).
## Contributing
Please see the [contributing guide](CONTRIBUTING.md).
## License
[MIT](LICENSE.md)
[cov-img]: https://img.shields.io/codecov/c/github/dogma-io/babel-plugin-react-code-block.svg "Code Coverage"
[cov-url]: https://codecov.io/gh/dogma-io/babel-plugin-react-code-block
[npm-img]: https://img.shields.io/npm/v/babel-plugin-react-code-block.svg "NPM Version"
[npm-url]: https://www.npmjs.com/package/babel-plugin-react-code-block