How to use react-markdown - 10 common examples

"hr",
  "br",
  "div",
  "table",
  "thead",
  "caption",
  "tbody",
  "tr",
  "th",
  "td",
  "pre"
];

// We want to allow HTML in markdown, but not anything unsafe like script tags.
// https://github.com/aknuds1/html-to-react#with-custom-processing-instructions
const parseHtml = htmlParser({
  isValidNode: (node: any) => {
    return allowedTags.indexOf(node.type.toLowerCase()) >= 0;
  }
});

function flatten(text: any, child: any) {
  return typeof child === "string"
    ? text + child
    : React.Children.toArray(child.props.children).reduce(flatten, text);
}

function slugify(text: string): string {
  text = text.toLowerCase();
  text = text.split(" ").join("-");
  text = text.split(/\t/).join("--");
  text = text.split(/[|$&`~=\\/@+*!?({[\]})<>=.,;:'"^]/).join("");

const makeTransformImageUri = ({ repository }) => uri => {
  // make sure to sanitize links through XSS-filter
  let sanitizedUri = uriTransformer(uri);
  // transform github relative links to images to absolute one to raw.githubusercontent.com
  sanitizedUri = repository.isGithub
    ? buildImageUrl(repository, sanitizedUri)
    : sanitizedUri;
  return sanitizedUri;
};

const makeTransformLinkUri = ({ repository }) => uri => {
  // make sure to sanitize links through XSS-filter
  let sanitizedUri = uriTransformer(uri);
  // transform github relative links to absolute ones
  // keep the anchors - will be rendered by LinkRenderer
  sanitizedUri =
    repository.isGithub && !(uri && uri.startsWith("#"))
      ? buildLinkUrl(repository, sanitizedUri)
      : sanitizedUri;
  // transform links to npm to be used by our front router
  return sanitizedUri
    ? sanitizedUri.replace(
        /http[s]?:\/\/(www\.)?npmjs.com\/package\//,
        "#/package/"
      )
    : null;
};

import React from 'react'

import HtmlToReact from 'html-to-react' // https://github.com/aknuds1/html-to-react
import ReactMarkdown from 'react-markdown' // https://github.com/rexxars/react-markdown
import htmlParser from 'react-markdown/plugins/html-parser'

import 'github-markdown-css' // https://github.com/sindresorhus/github-markdown-css

// See https://github.com/aknuds1/html-to-react#with-custom-processing-instructions
// for more info on the processing instructions
const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React)
const parseHtml = htmlParser({
  isValidNode: node => node.type !== 'script',
  processingInstructions: [
    {
      shouldProcessNode: node => {
        return true
      },
      processNode: processNodeDefinitions.processDefaultNode
    }
  ]
})

export const Markdown = ({ children, className }) => (
  <div>
    </div>

// @flow

import * as React from 'react'
import {View} from 'react-native'
import glamorous from 'glamorous-native'
import ReactMarkdown from 'react-markdown'

import propTypes from 'prop-types'
ReactMarkdown.propTypes.containerTagName = propTypes.func

import {Paragraph, Strong, Emph, BlockQuote} from './formatting'
import {Code, HighlightedCodeBlock as CodeBlock} from './code'
import {Heading} from './heading'
import {Link} from './link'
import {Image} from './image'
import {List, ListItem} from './list'

const Softbreak = () => ' '
const Hardbreak = () => '\n'
const HorizontalRule = glamorous.view({
	width: '100%',
	height: 1,
	backgroundColor: 'black',
})

styles,
    }) => {

  if (hide || !post) {
    return ( <div></div> )
  } else {
    return (
      <div>
        
      </div>
    )
  }
}

render() {
    return (
      <div>
        
          <div>
            
          </div>
          <div>
            
          </div>
        
      </div>
    );
  }
}

<div>
            
          </div>
          <div>
            <div>
              
                <img src="{post.user.image}">
              
            </div>
            <strong>
              {post.user.displayName}</strong></div>

<div>
            <p>Nothing to preview yet</p>
          </div>
        
      )
    }

    return (
      <div>
        <div>
          
        </div>
      </div>
    )
  } else {
    return <div>
  }
}
</div>

)
    }

    return (
      <div>
        <h3>
          {topic}
        </h3>
        <div>
          
        </div>
      </div>
    )
  } else {
    return <div>
  }
}
</div>