{"id":18433238,"url":"https://github.com/jsakas/markdown-to-react-loader","last_synced_at":"2025-07-09T14:07:06.465Z","repository":{"id":32887585,"uuid":"145200898","full_name":"jsakas/markdown-to-react-loader","owner":"jsakas","description":"A Webpack loader for converting Markdown files to React components","archived":false,"fork":false,"pushed_at":"2023-01-04T03:20:31.000Z","size":1053,"stargazers_count":5,"open_issues_count":15,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-22T23:03:47.642Z","etag":null,"topics":["markdown","react","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsakas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-18T07:49:07.000Z","updated_at":"2023-03-17T11:29:16.000Z","dependencies_parsed_at":"2023-01-14T22:45:51.925Z","dependency_job_id":null,"html_url":"https://github.com/jsakas/markdown-to-react-loader","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakas%2Fmarkdown-to-react-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakas%2Fmarkdown-to-react-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakas%2Fmarkdown-to-react-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakas%2Fmarkdown-to-react-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsakas","download_url":"https://codeload.github.com/jsakas/markdown-to-react-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247716183,"owners_count":20984186,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["markdown","react","webpack","webpack-loader"],"created_at":"2024-11-06T05:32:26.118Z","updated_at":"2025-04-07T19:31:09.825Z","avatar_url":"https://github.com/jsakas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# markdown-to-react-loader\n\n\n### [![NpmVersion](https://img.shields.io/npm/v/markdown-to-react-loader.svg)](https://www.npmjs.com/package/markdown-to-react-loader) [![NpmDownloads](https://img.shields.io/npm/dt/markdown-to-react-loader.svg)](https://www.npmjs.com/package/markdown-to-react-loader) [![Build Status](https://travis-ci.org/jsakas/markdown-to-react-loader.svg?branch=master)](https://travis-ci.org/jsakas/markdown-to-react-loader)\n\n\nA Webpack loader for converting Markdown files to React components (JSX).\n\nCurrently supports imports, syntax highlighting, and extra data.\n\nThis loader was built for the purpose of documenting React Components, but can be used for other static documents you want to convert to HTML. \n\n#### It turns this:\n\n```markdown\n# Hello, World\n\nIts great to be here!\n```\n\n#### Into this:\n\n```javascript\nimport React, { Fragment } from 'react';\nconst Markdown = () =\u003e (\n  \u003cFragment\u003e\n    \u003ch1\u003eHello, World\u003c/h1\u003e\n    \u003cp\u003eIts great to be here!\u003c/p\u003e\n  \u003c/Fragment\u003e\n);\nexport default Markdown;\n```\n\nNote: Requires React 16.2+\n\n# Installation\n\n```\nyarn add --dev markdown-to-react-loader\n```\n```\nnpm install --save-dev markdown-to-react-loader\n```\n\n# Usage\n\nBecause it outputs ES6 and JSX its recommended to use in conjunction with the babel-loader to compile for your targetted environment.\n\n```\nyarn add --dev babel-loader @babel/preset-env @babel/preset-react\n```\n```\nnpm install --save-dev babel-loader @babel/preset-env @babel/preset-react\n```\n\nUpdate your Webpack config:\n\n```javascript\n{\n  test: /\\.md$/,\n  exclude: /node_modules/,\n  use: [\n    {\n    \tloader: 'babel-loader',\n      options: {\n          presets: ['@babel/env', '@babel/react']\n      }\n    },\n    'markdown-to-react-loader',\n  ],\n},\n```\n\nThen you can use the loader like:\n\n#### HelloWorld.md\n\n```markdown\n# Hello, World\n\nIts great to be here!\n```\n\n#### App.js\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport HelloWorld from './HelloWorld.md';\n\nReactDOM.Render(\u003cHelloWorld /\u003e, document.getElementById('app'));\n```\n\n## Imports\n\nYou can write ES6 imports inline using front matter.\n\n#### HelloWorldWithImport.md\n\n```markdown\n---\nimports: |\n  import { SomeComponent } from './SomeComponent';\n---\n\n# Hello, World\n\nHeres a component rendered inline:\n\n\u003cSomeComponent /\u003e\n\n```\n\n## Controlling JavaScript\n\nYou can pass simple props to components. However, if you need to write more advanced JavaScript, its recommended to declare it in the imports section.\n\n```markdown\n---\nimports: |\n  import { SomeComponent } from './SomeComponent';\n\n  const dynamic = () =\u003e import('./SomeComponent');\n\n  console.log('You can put anything here!');\n---\n\n\u003cSomeComponent simple=\"string\" /\u003e\n\u003cSomeComponent advanced={dynamic} /\u003e\n\n```\n\nAnything added to the `imports` front matter is added between the React import and component declaration in the outputted module.\n\n## Syntax Highlighting\n\nSyntax highlighting is done using PrismJS and is picked up automatically by tagging code blocks:\n\n#### CodeSample.md\n\n    # Code Sample\n\n    ```javascript\n    console.log('This will be marked for highlighting');\n    ```\n\n## Extra Data\n\nAny front matter that is not under the `imports` key is considered extra data. It is parsed and exported as named exports from the module.\n\n```markdown\n---\ntitle: Hello World\nslug: /post/1\nobject:\n    - foo: bar\n    - baz: biz\narray:\n    - foo\n    - bar\n---\n```\n\nThe above front matter is transformed to:\n\n```javascript\nconst title = \"Hello World\";\nexport { title };\n\nconst slug = \"/post/1\";\nexport { slug };\n\nconst object = [{ foo: \"bar\" }, { baz: \"biz\" }];\nexport { object };\n\nconst array = [\"foo\", \"bar\"];\nexport { array };\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsakas%2Fmarkdown-to-react-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsakas%2Fmarkdown-to-react-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsakas%2Fmarkdown-to-react-loader/lists"}