{"_id":"@ddx0510/rn-mdx","_rev":"5-27430ac5a0ff4e3bf315cd3263788e08","time":{"created":"2023-10-24T11:00:57.201Z","0.0.7":"2023-10-24T10:31:26.780Z","modified":"2023-10-24T11:50:42.425Z","0.0.8-beta":"2023-10-24T11:00:57.636Z","0.0.8-beta2":"2023-10-24T11:45:02.118Z","0.0.8":"2023-10-24T11:50:42.252Z"},"name":"@ddx0510/rn-mdx","dist-tags":{"latest":"0.0.8"},"versions":{"0.0.8-beta":{"name":"@ddx0510/rn-mdx","version":"0.0.8-beta","description":"Show MDX content in React-Native. Expo compatible.","main":"lib/index.js","module":"lib/index.js","types":"lib/index.d.ts","react-native":"lib/index.js","source":"src/index.ts","scripts":{"test":"echo \"No test specified\"","build":"tsc"},"publishConfig":{},"keywords":[],"author":{"name":"Daniel Dunderfelt, ddx0510 and other contributors"},"license":"MIT","devDependencies":{"@types/mdx-js__react":"^1.5.3","@types/react":"^16.14.8","@types/react-native":"^0.61.0","react":"17.0.1","react-native":"0.64.2","typescript":"~4.3.5"},"peerDependencies":{"react":">=17.*","react-native":">=0.64.*"},"dependencies":{"@mdx-js/runtime":"^2.0.0-next.9","react-native-fit-image":"^1.5.5","remark-gfm":"^4.0.0"},"gitHead":"1a93b8e2a61d22b1a4f21613e16e46e6cdeef5c2","_id":"@ddx0510/rn-mdx@0.0.8-beta","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-d9D/Tb+EiRrE2R36G4qidG1vZ4NUq1nH0q+GYM+xl8td9OeN9EEeU4Yjkzz0osmOP5pGUPU5andGzVUVidJA8w==","shasum":"950187c39b1eb15099db24a2b3df204418e5e152","tarball":"https://registry.npmjs.org/@ddx0510/rn-mdx/-/rn-mdx-0.0.8-beta.tgz","fileCount":23,"unpackedSize":35435,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID7K9nM5UsfwisWbVe3V59ncPA57IvcfEyKBwOL/ocr9AiEAs93uu30aRlZNcJdY8+mcrv3Tj913DPAoPPx9mTWdRjA="}]},"_npmUser":{"name":"ddx0510","email":"ddx0510@gmail.com"},"directories":{},"maintainers":[{"name":"ddx0510","email":"ddx0510@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-mdx_0.0.8-beta_1698145257323_0.29510743025641495"},"_hasShrinkwrap":false},"0.0.8-beta2":{"name":"@ddx0510/rn-mdx","version":"0.0.8-beta2","description":"Show MDX content in React-Native. Expo compatible.","main":"lib/index.js","module":"lib/index.js","types":"lib/index.d.ts","react-native":"lib/index.js","source":"src/index.ts","scripts":{"test":"echo \"No test specified\"","build":"tsc"},"publishConfig":{},"keywords":[],"author":{"name":"Daniel Dunderfelt, ddx0510 and other contributors"},"license":"MIT","devDependencies":{"@types/mdx-js__react":"^1.5.3","@types/react":"^16.14.8","@types/react-native":"^0.61.0","react":"17.0.1","react-native":"0.64.2","typescript":"~4.3.5"},"peerDependencies":{"react":">=17.*","react-native":">=0.64.*"},"dependencies":{"@mdx-js/runtime":"^2.0.0-next.9","react-native-fit-image":"^1.5.5"},"gitHead":"a216af7ffff8b6e2feadc5770cf4b4a06d9f7891","_id":"@ddx0510/rn-mdx@0.0.8-beta2","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-UWXwBAejh6spXQopbsqqKAKuMYxlHincVyrPmZT/Nb0M/y7OMk4M00ojYS+lKinW2ZiaJHicxiQfzxxT1Y+pQA==","shasum":"1bee0c3fee5e39d6161f207c172a08b8769f1ef7","tarball":"https://registry.npmjs.org/@ddx0510/rn-mdx/-/rn-mdx-0.0.8-beta2.tgz","fileCount":23,"unpackedSize":35320,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIECc/NmADA2ohHnwEdsqmOkj5rFLEoSL7oW+cy0X7J/bAiA0IdlEQEg8dMLC/VMCgsii3etiP9I1tizDp+7brCp6Ig=="}]},"_npmUser":{"name":"ddx0510","email":"ddx0510@gmail.com"},"directories":{},"maintainers":[{"name":"ddx0510","email":"ddx0510@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-mdx_0.0.8-beta2_1698147901790_0.6428363270946627"},"_hasShrinkwrap":false},"0.0.8":{"name":"@ddx0510/rn-mdx","version":"0.0.8","description":"Show MDX content in React-Native. Expo compatible.","main":"lib/index.js","module":"lib/index.js","types":"lib/index.d.ts","react-native":"lib/index.js","source":"src/index.ts","scripts":{"test":"echo \"No test specified\"","build":"tsc"},"publishConfig":{},"keywords":[],"author":{"name":"Daniel Dunderfelt, ddx0510 and other contributors"},"license":"MIT","devDependencies":{"@types/mdx-js__react":"^1.5.3","@types/react":"^16.14.8","@types/react-native":"^0.61.0","react":"17.0.1","react-native":"0.64.2","typescript":"~4.3.5"},"peerDependencies":{"react":">=17.*","react-native":">=0.64.*"},"dependencies":{"@mdx-js/runtime":"^2.0.0-next.9","react-native-fit-image":"^1.5.5"},"gitHead":"a216af7ffff8b6e2feadc5770cf4b4a06d9f7891","_id":"@ddx0510/rn-mdx@0.0.8","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-N7E4zVin98qLR9RISkblz3CCGSX6uyuOjV20/mGyvyPzHfFbURCqqsVXdA+ILQeNzuntdpAIoYyjKZ9W+OG4xA==","shasum":"bf9f4ec1162cfcb379ea6bf8363edac0f83034cd","tarball":"https://registry.npmjs.org/@ddx0510/rn-mdx/-/rn-mdx-0.0.8.tgz","fileCount":24,"unpackedSize":39180,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJKIBzni18mm5ntCO0U0VNzUACJwVaQ3lxZugltSixMgIhAO/2g0UVnKZrVLoiE5U4Ih06KA+22XW2tHOiZfdZA9lT"}]},"_npmUser":{"name":"ddx0510","email":"ddx0510@gmail.com"},"directories":{},"maintainers":[{"name":"ddx0510","email":"ddx0510@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-mdx_0.0.8_1698148242033_0.9792913982397289"},"_hasShrinkwrap":false}},"maintainers":[{"name":"ddx0510","email":"ddx0510@gmail.com"}],"description":"Show MDX content in React-Native. Expo compatible.","keywords":[],"author":{"name":"Daniel Dunderfelt, ddx0510 and other contributors"},"license":"MIT","readme":"# Notice\n!!! This package is forked from [rn-mdx](https://github.com/danieldunderfelt/rn-mdx).\n\nAdded the MDX-js/runtime plugins support, which is very WIP and not guaranteed to work,still under investigation.\n\n# rn-mdx\n\nShow MDX content in React-Native. Expo compatible.\n\n# Usage\n\nThe short version is\n\n1. Get MDX content\n2. Feed it into `<RenderMdx />`\n\nExample:\n\n```jsx\nimport { RenderMdx } from 'rn-mdx'\n\nconst MdxComponent = () => {\n  let mdxString = `\n    This is MDX content! <TextComponent>Very cool!</TextComponent>\n    \n    <CustomComponent />\n    \n    More **markdown** text here! \n  `\n  \n  let customComponents = {\n    TextComponent,\n    CustomComponent\n  }\n  \n  return (\n    <RenderMdx components={customComponents}>\n      {mdxString}\n    </RenderMdx>\n  )\n}\n```\n\n## Dynamic with runtime\n\nThe long version is... longer.\n\nThe main question is how to get the MDX content into the app. The easiest way is to have it as a template string in a `.js`, `.ts` or even `.json` file, then you can just import it where ever you need to render it.\n\nThe next-easiest method is to configure your app to import `.mdx` files as plain-text and THEN feed it to `<RenderMdx />`. To do this, you need to set up a Webpack build system and use [Asset modules](https://webpack.js.org/guides/asset-modules/) (or [raw-loader](https://v4.webpack.js.org/loaders/raw-loader/)) OR set up React-Native's Metro bundler to import `.mdx` files as text. Be warned, as this is finicky and may break between React-Native versions.\n\n### Set up metro to handle .mdx files\n\nFollow these steps to set up Metro such that you can `import` MDX and MD files as plain text in your app. This is Expo compatible!\n\n1. First make an `mdx` file with some content and import it in the `App.js` (or similar) module. Console.log the result. It won't work yet, but if you do this first you know when it starts working!\n2. Install `babel-plugin-inline-import`.\n3. Make a `babel.config.js` file in the root of your project. Set up the `inline-import` plugin to import `.md` and `.mdx` files. Example:\n\n```\nmodule.exports = function (api) {\n  api.cache(false)\n  return {\n    presets: ['babel-preset-expo'],\n    plugins: [\n      [\n        'inline-import',\n        {\n          extensions: ['.md', '.mdx'],\n        },\n      ],\n    ],\n  }\n}\n```\n4. Create a `metro.config.js` file in the root of your project. Add this content to tell Metro that md and mdx files are _fine_ to eat:\n\n```\nmodule.exports = {\n  resolver: {\n    sourceExts: ['js', 'ts', 'tsx', 'jsx', 'json', 'md', 'mdx'],\n  },\n}\n```\nI took the liberty of not concating the file extensions with the default ones since installing `metro-config` or using `@expo/metro-config` seemed to open up a can of icky worms I didn't want to deal with. But it's better this way, just add any file extensions you may want to import in the future to this array.\n5. If you are not using Typescript, your MDX import should work now! Congrats... well, limited congrats since you don't have any type safety. Oh well.\n6. You must also tell Typescript that md and mdx files are safe to eat. You can try the \"airplane\" tactic, or, if that doesn't work, create a `globals.d.ts` file in the root of your project and add the following content:\n\n```\ndeclare module '*.mdx'\ndeclare module '*.md'\n```\n\n7. And NOW it should work for typesafe peeps as well!\n\n### Use Repack\n\nIf you don't want to use Metro (or if it broke), you may want to set up Webpack. I am not a Webpack expert so I won't provide a nice guide, but you can start by looking at [Repack](https://github.com/callstack/repack). It seems nice!\n\n## Pre-compiled\n\nYou can also pre-compile the MDX into Javascript or Typescript files which can be imported directly. This needs to be done using React-Native components, and this library provides a CLI for this.\n\nI mean, it WILl provide a CLI for this. It is not yet done.\n","readmeFilename":"README.md"}