{"_id":"@540deg/react-native-simple-markdown","_rev":"5-89c0ef6c116955d08f16f6f85c3024a1","name":"@540deg/react-native-simple-markdown","dist-tags":{"latest":"1.1.2"},"versions":{"1.1.1":{"name":"@540deg/react-native-simple-markdown","repository":{"type":"git","url":"git+https://github.com/540/react-native-simple-markdown.git"},"version":"1.1.1","description":"Render Markdown in React Native with native components (iOS & Android)","main":"src/index.js","author":{"name":"540deg","email":"dev@540deg.com"},"scripts":{"lint":"eslint .","flow":"flow --show-all-errors"},"dependencies":{"lodash":"^4.15.0","prop-types":"^15.6.0","simple-markdown":"^0.4.0"},"peerDependencies":{"react":"*","react-native":"*"},"keywords":["react-native","native","markdown","md","parse","parser"],"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.1","babel-plugin-transform-flow-strip-types":"^6.22.0","babel-preset-es2015":"^6.24.1","babel-preset-flow":"^6.23.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","eslint":"^4.15.0","eslint-config-airbnb":"^16.1.0","eslint-plugin-babel":"^4.1.2","eslint-plugin-flowtype":"^2.41.0","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^6.0.3","eslint-plugin-react":"^7.5.1","flow-bin":"^0.61.0","flow-copy-source":"^1.2.1","husky":"^0.14.3","pretty-quick":"^1.2.2","rimraf":"^2.6.2"},"gitHead":"04772cd1c6ae7cfc49e5c16a8f307adc63567c61","bugs":{"url":"https://github.com/540/react-native-simple-markdown/issues"},"homepage":"https://github.com/540/react-native-simple-markdown#readme","_id":"@540deg/react-native-simple-markdown@1.1.1","_npmVersion":"6.4.1","_nodeVersion":"9.11.2","_npmUser":{"name":"gorkma","email":"gorka@540deg.com"},"dist":{"integrity":"sha512-nMb7eT14mKh6TPSfHBOPScFihlerXyHmoOTINmwbitDg60/Ma93rDoc2tcHO9gEipiNwT48cpokFCpnTNWmHMA==","shasum":"6d22d6d4153a3bfa6fdeccf7497884041109cb11","tarball":"https://registry.npmjs.org/@540deg/react-native-simple-markdown/-/react-native-simple-markdown-1.1.1.tgz","fileCount":7,"unpackedSize":21789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb9nW1CRA9TVsSAnZWagAAVL4QAJ+eQkKtbgDwheQJnlsX\nBTIuPzXftAfC/ilP5Apa9AJLCcoRat/GsVZhFyiCh4LNedj67ls4tT4pJ2wV\nzNkkMhXqkV468KZV5O2pD6TrJjxMsWTzUa5pVh0a+QNHj9OzEDeOK2fZQReO\n+0PbrCofNzMarsdLzDuqj3NKjl0vqHhYizYJo1spI7B3S366vQ2j8vwZUL3m\nwOSNa3q3/Zhp0ywcBLxbobi3JZEX/SiyVotWBNfC3ncGxPmvB/0LA+9LtgEG\neZzudage400Gang7MVKQazM2ZI7nXB0NvA3StO71mwrRpD1c51dGnoKqsWAc\n+LaH59BVR8yvDUUu+YJwGNZAeoCXLLC1zXwmYfH8O1ekDaIAR++I5CdYIOoT\nHi2Wx3J8bp8GBJZWQqpx+9U+bfF7B/1yeH7vHKu87xyvxz+fDFgj3SDyxXXo\nFKQKuL8GiIXqiJ2HnmFMsIV2+/jG+AbT7drecge7VPwJEy74HlwgHXVWL5f4\n8NnQbOByfmmeMiLrtwmgsHisTzuIDHeEAzkLUkQSC10U+xljPa916CLyHvxp\nKX+EdqQeufQKI2of68i9g2HD8NgwgzpPV0kEhLQHpkaVTDzIfpxXU7hW4qkJ\naq4I/4HZSsf5s6ntpLoiMUIc8XuO2ueHM4DsGxC57qP8kavEjMcmH4t0LOyt\ncQ1W\r\n=XFj0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAufzP6ifo4RpQIllzjJUvyhLCguNeFzSer7b83l4wkJAiBE+RY3fTA4ar10owE5S+cJ2Asgu313dv2dkXHB1NcXoQ=="}]},"maintainers":[{"name":"mikel540","email":"mikel@540deg.com"},{"name":"gorkma","email":"gorka@540deg.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-simple-markdown_1.1.1_1542878645374_0.4034374950797355"},"_hasShrinkwrap":false},"1.1.2":{"name":"@540deg/react-native-simple-markdown","repository":{"type":"git","url":"git+https://github.com/540/react-native-simple-markdown.git"},"version":"1.1.2","description":"Render Markdown in React Native with native components (iOS & Android)","main":"src/index.js","author":{"name":"540deg","email":"dev@540deg.com"},"scripts":{"lint":"eslint .","flow":"flow --show-all-errors"},"dependencies":{"lodash":"^4.15.0","prop-types":"^15.6.0","simple-markdown":"^0.4.0"},"peerDependencies":{"react":"*","react-native":"*"},"keywords":["react-native","native","markdown","md","parse","parser"],"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.1","babel-plugin-transform-flow-strip-types":"^6.22.0","babel-preset-es2015":"^6.24.1","babel-preset-flow":"^6.23.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","eslint":"^4.15.0","eslint-config-airbnb":"^16.1.0","eslint-plugin-babel":"^4.1.2","eslint-plugin-flowtype":"^2.41.0","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^6.0.3","eslint-plugin-react":"^7.5.1","flow-bin":"^0.61.0","flow-copy-source":"^1.2.1","husky":"^0.14.3","pretty-quick":"^1.2.2","rimraf":"^2.6.2"},"gitHead":"bac4f538ddbefdf2b77ea125e5540194fbdee1e9","bugs":{"url":"https://github.com/540/react-native-simple-markdown/issues"},"homepage":"https://github.com/540/react-native-simple-markdown#readme","_id":"@540deg/react-native-simple-markdown@1.1.2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"mikel540","email":"mikel@540deg.com"},"dist":{"integrity":"sha512-YTEDFkLNcNfZ3wWCQi1AnslHyuQVV5TtwWrDn909nIKOYQp0Thus7ZNR+qXci5H8wFVpOD0sYsc5/WZ78K0jXg==","shasum":"36e8784188f4af2ac5362ade61d28be2483a0d54","tarball":"https://registry.npmjs.org/@540deg/react-native-simple-markdown/-/react-native-simple-markdown-1.1.2.tgz","fileCount":7,"unpackedSize":21827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb9oiICRA9TVsSAnZWagAAF+YP/iYHUwymZ9wwyMzRnJaZ\nUtYswZP8q9ezDf0fiPIJquCPv+4+zPdE0j6qRjamt0JBo3dtH1xTGVm17hen\nCRvw88qsjTrFH0tWAI2CnLke2RCmMpR/Cf6rz3A8/b/5PanYSipSvWSnGgJI\ncv1SHHwtCD+NPYSR2njT3sSvwLhH6AKXowURhk8W/2m+f3sgghJ23w/R6SeV\nbV4jMCiTQShLVPHtZBPG51OiBbkwQ6FVtHjPfadldUBM4IbITqaB/NIikV2p\nQOQyCF5DUUMnuEFwNBhHzjcLTyhkt7pIjCWn62KzPgKPVImAWoQhIkvv3Eb+\nZlqspHFzVBY/+79+Pt15JT6DzzFpvsnsSilqtQ/XdaMITLQCYLu642A08c4B\nm/fL6YymEzokKj7298EJums9EFsRtTwGx/kq9Kn8DYtapdPKhkEP8ZPHmtlM\nqlIIIHahpL8HGuNxWR6TZch89Qclt8eNwBPaEXcB4inMT8hwCNDnUAsfmlnF\nPWk95CsTd15+tPkhiMLNq9cokQ0WX7B+ogE0Z4D1sjq3h2GomFnRw3pGTpK8\nOh53K/72O0O87PJJhnYTYW7sbFPoaTzxNfQViE0LDBSipGtNWKqoQ3t/TIoS\nn06bnZ+ZQWiBmoFfnHkzYtP7/cdvZ0Q5+USV3v1iUBDlyp0x19Y+n/WXeOn0\nEcq1\r\n=geJQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoBiZ0+/aJ6rz1p7/usLv20Ew/BSqgf25vLCkxPId0bQIhAIe4pEWmqP+qlu68qoR4TcLnnt4OSiyYJk+KXkG9vsoV"}]},"maintainers":[{"name":"gorkma","email":"gorka@540deg.com"},{"name":"mikel540","email":"mikel@540deg.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-simple-markdown_1.1.2_1542883464175_0.4873795004486692"},"_hasShrinkwrap":false}},"time":{"created":"2018-11-22T09:24:05.213Z","1.1.1":"2018-11-22T09:24:05.499Z","modified":"2022-04-04T10:48:07.788Z","1.1.2":"2018-11-22T10:44:24.279Z"},"maintainers":[{"email":"pablo@540deg.com","name":"pabloalbizu"},{"email":"mikel@540deg.com","name":"mikel540"},{"email":"gorka@540deg.com","name":"gorkma"}],"description":"Render Markdown in React Native with native components (iOS & Android)","homepage":"https://github.com/540/react-native-simple-markdown#readme","keywords":["react-native","native","markdown","md","parse","parser"],"repository":{"type":"git","url":"git+https://github.com/540/react-native-simple-markdown.git"},"author":{"name":"540deg","email":"dev@540deg.com"},"bugs":{"url":"https://github.com/540/react-native-simple-markdown/issues"},"readme":"# react-native-simple-markdown\r\n[![CircleCI](https://circleci.com/gh/CharlesMangwa/react-native-simple-markdown.svg?style=shield&circle-token=4a6119afe938ed7305713fece562bb33d6bc22d8)](https://circleci.com/gh/CharlesMangwa/react-native-simple-markdown)\r\n[![npm downloads](https://img.shields.io/npm/dm/react-native-simple-markdown.svg?maxAge=2592000)](https://www.npmjs.com/package/react-native-simple-markdown)\r\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\r\n[![npm version](https://img.shields.io/npm/v/react-native-simple-markdown.svg)](https://www.npmjs.com/package/react-native-simple-markdown)\r\n\r\nA component for rendering Markdown in React Native with native components, working with both iOS & Android. Pull requests are welcome! 😃 🎉\r\n\r\n## Getting started\r\n\r\n`yarn add react-native-simple-markdown`\r\n\r\n## Future\r\n\r\nThis library is currently being (kinda) completely rewritten. If you've been using this lib for a short/long time or are interesting in shaping it for the future: [just chime in and share your thoughts with us](https://github.com/CharlesMangwa/react-native-simple-markdown/issues/75); or give a look at the [styles section](https://github.com/CharlesMangwa/react-native-simple-markdown/tree/next#styles-1), some help is also need there!\r\n\r\n## Usage\r\n\r\nAll you need to do is import the `react-native-simple-markdown` and then use the\r\n`<Markdown />` component.\r\n\r\n```js\r\nimport React from 'react'\r\nimport Markdown from 'react-native-simple-markdown'\r\n\r\nconst MyAwesomeApp = () => {\r\n  return (\r\n    <Markdown styles={markdownStyles}>\r\n      #Markdown in react-native is so cool! {'\\n\\n'}\r\n\r\n      You can **emphasize** what you want, or just _suggest it_ 😏…{'\\n'}\r\n\r\n      You can even [**link your website**](https://twitter.com/Charles_Mangwa) or if you prefer: [email somebody](mailto:email@somebody.com){'\\n'}\r\n\r\n      Spice it up with some GIFs 💃:\r\n\r\n      ![Some GIF](https://media.giphy.com/media/dkGhBWE3SyzXW/giphy.gif){'\\n'}\r\n\r\n      And even add a cool video 😎!{'\\n'}\r\n\r\n      [![A cool video from YT](https://img.youtube.com/vi/dQw4w9WgXcQ/0.jpg)](http://www.youtube.com/watch?v=dQw4w9WgXcQ)\r\n\r\n      [![Another one from Vimeo](https://i.vimeocdn.com/video/399486266_640.jpg)](https://vimeo.com/57580368)\r\n    </Markdown>   \r\n  )\r\n}\r\n\r\nconst markdownStyles = {\r\n  heading1: {\r\n    fontSize: 24,\r\n    color: 'purple',\r\n  },\r\n  link: {\r\n    color: 'pink',\r\n  },\r\n  mailTo: {\r\n    color: 'orange',\r\n  },\r\n  text: {\r\n    color: '#555555',\r\n  },\r\n}\r\n```\r\n\r\n## Properties\r\n### `styles`\r\n\r\n`<Markdown />` will apply its style by default. However you can pass a `styles` prop to customize it has you wish.\r\n\r\nExample:\r\n\r\n```js\r\n<Markdown\r\n  styles={{\r\n    heading1: {\r\n      fontSize: 20,\r\n    },\r\n    strong: {\r\n      fontWeight: 'bold',\r\n    }\r\n  }}\r\n>\r\n  #Hello 👋\r\n</Markdown>\r\n```\r\n\r\n### `rules`\r\n\r\nHere again, `<Markdown />` will apply its rules by default. However you can pass a `rules` prop to add your own and then customize how the Markdown elements will be displayed!\r\n\r\nExample:\r\n\r\n```js\r\n<Markdown\r\n  rules={{\r\n    image: {\r\n      react: (node, output, state) => (\r\n        <CustomImageComponent\r\n          key={state.key}\r\n          source={{ uri: node.target }}\r\n        />\r\n      ),\r\n    },\r\n  }}\r\n>\r\n  ![Alt text](/path/to/img.jpg)\r\n</Markdown>\r\n```\r\n\r\nRNSM also allows you to remove easily unwanted styling options without having to pass in rule objects that have their react key implemented/dummied to ignore those styling options.\r\n\r\nExample:\r\n\r\n```js\r\n<Markdown\r\n  styles={ markdownStyles }\r\n  whitelist={['link', 'url']}\r\n>\r\n  { description }\r\n</Markdown>\r\n```\r\n\r\n`whitelist` will only apply `link` and `url` default styles, while `blacklist` will do the opposite. You don't need to pass in a rules prop that contained a key for all the styles you don't want and reimplement their styling output anymore.\r\n\r\n### errorHandler\r\n\r\nIf you happened to have an error with your Markdown during the rendering, you can pass a `errorHandler` with a function that will let you see what's going on:\r\n\r\n```jsx\r\n<Markdown\r\n  errorHandler={(errors, children) => console.log(errors, children)}\r\n>\r\n...\r\n</Markdown>\r\n\r\n```\r\n\r\n## Styles\r\n\r\nGiven that the way React Native renders element has evolved in the latest versions (0.48+), we'll have to check manually that every single rule works as expected by:\r\n- rendering properly on both iOS & Android\r\n- being able to be styled on both platforms\r\n- not breaking/overriding others rules when its own is applied\r\n\r\nWhen those 3 criteria are fulfilled, we can validate the **Rendering** column. Feel free to check any of these and send a PR to validate it [on Snack](https://snack.expo.io/By2dzl04G)!\r\n\r\n| Property | Type | Rendering | Features |\r\n| ------ | ------ |  ------ |  ------ |\r\n| `blockQuote` | `<View>` | ❌ | Also `blockQuoteBar` (`<View>`) and `blockQuoteText` (`<Text>`) |\r\n| `br` | `<Text>` | ❌ | - |\r\n| `del` | `<Text>` | ❌ | - |\r\n| `em` | `<Text>` | ❌ | - |\r\n| `hr` | `<View>` | ❌ | - |\r\n| `heading` | `<Text>` | ❌ | Also `heading1` through `heading6` |\r\n| `image` | `<Image>` | ❌ | ou can use `resizeMode` in `<Markdown />` styles prop to set a `resizeMode` |\r\n| `inlineCode` | `<Text>` | ❌ | - |\r\n| `link` | `<Text>` | ❌ | - |\r\n| `list` | `<View>` | ❌ | Also `listItem` (`<View>`), `listItemBullet` (`<Text>`), `listItemBulletType` (`Unicode character`), `listItemNumber` (`<Text>`) and `listItemText` (`<Text>`) |\r\n| `mailTo` | `<Text>` | ❌ | - |\r\n| `paragraph` | `<View>` | ❌ | - |\r\n| `plainText` | `<Text>` | ❌ | Used for styling text without any associated styles |\r\n| `strong` | `<Text>` | ❌ | - |\r\n| `table` | `<View>` | ❌ | - |\r\n| `tableHeader` | `<View>` | ❌ | - |\r\n| `tableHeaderCell` | `<View>` | ❌ | - |\r\n| `tableRow` | `<View>` | ❌ | - |\r\n| `tableRowCell` | `<View>` | ❌ | - |\r\n| `tableRowLast` | `<View>` | ❌ | Inherits from `tableRow` |\r\n| `text` | `<Text>` | ❌ | - |\r\n| `u` | `<Text>` | ❌ | - |\r\n| `url` | `<Text>` | ❌ | - |\r\n| `video` | `<Image>` | ❌ | Supports YouTube & Vimeo |\r\n| `view` | `<View>` | ❌ | This is the `View` container where the Markdown is rendered |\r\n\r\n## Credits\r\n\r\nThis project was forked from [`react-native-markdown`](https://github.com/lwansbrough/react-native-markdown) by [@lwansbrough](https://github.com/lwansbrough) 👍\r\n","readmeFilename":"README.md"}