rehype-react - Rehype compiler plugin to convert HAST into React virtual DOM

  •        78

Compiles HAST to React with rehype. The following example shows how to create a markdown input textarea, and corresponding rendered HTML output. The markdown is processed to add a Table of Contents and to render GitHub mentions (and other cool GH features), and to highlight code blocks.

https://github.com/wooorm/rehype
https://github.com/rhysd/rehype-react

Dependencies:

has : ^1.0.1
hast-to-hyperscript : ^4.0.0

Tags
Implementation
License
Platform

   




Related Projects

markdown-to-jsx - 🏭 The most lightweight, customizable React markdown component.

  •    Javascript

The most lightweight, customizable React markdown component. Any HTML tags rendered by the compiler and/or <Markdown> component can be overridden to include additional props or even a different HTML representation entirely.

mdxc - Use React Components within Markdown.

  •    Javascript

MDXC is a tool to convert Markdown into React Components. It lets you import and use other React Components within your Markdown. Try it yourself with the MDXC Playground. MDX is a simpler way to write content for your React applications. While standard Markdown compiles to a string of HTML, MDX compiles directly to JavaScript. If you're writing a React app, MDX is both easier to use and more flexible than standard Markdown.

vue-styleguidist - Created from react styleguidist for Vue Components with a living style guide

  •    Javascript

Project was started when not finding a tool that generates documentation of components with hot reloading, read documentation and have a playground. Created from React Styleguidist, implement additional support to read and compile .vue files. Only supports 2.x. Vue Styleguidist is a style guide generator for Vue components. It lists component and shows live, editable usage examples based on Markdown files. You can use it to generate a static HTML page to share and publish or as a workbench for developing new components using hot reloaded dev server.

babel-plugin-react-css-modules - Transforms styleName to className using compile time CSS module resolution

  •    Javascript

Transforms styleName to className using compile time CSS module resolution. In contrast to react-css-modules, babel-plugin-react-css-modules has a lot smaller performance overhead (0-10% vs +50%; see Performance) and a lot smaller size footprint (less than 2kb vs 17kb react-css-modules + lodash dependency).

mdx - JSX in Markdown for ambitious projects

  •    Javascript

Markdown for the component era. MDX is a format that lets you seamlessly use JSX in your Markdown documents. You can import components, like interactive charts or notifs, and export metadata. This makes writing long-form content with components a blast 🚀.


react-lz-editor - A multilingual react rich-text editor component includes media support such as texts, images, videos, audios, links etc

  •    Javascript

An open source react rich-text editor ( mordern react editor includes media support such as texts, images, videos, audios, links etc. ), development based on Draft-Js and Ant-design, good support html, markdown, draft-raw mode. It's supports multiple languages well and welcome you add your language supports. Disabled media insert feature on demo page, because of there was no online API support for the time being, here is The server side API demo in java you may want.

docbox - REST API documentation generator

  •    CSS

Docbox is an open source REST API documentation system. It takes structured Markdown files and generates a friendly two-column layout with navigation, permalinks, and examples. The documentation source files that Docbox uses are friendly for documentation authors and free of presentational code: it's Markdown. Docbox is a JavaScript application written with React. The core magic is thanks to the remark Markdown parser, which enables the layout: after parsing a file into an Abstract Syntax Tree, we can move examples to the right, prose to the left, and build the navigation system.

react-native-simple-markdown - 📜 React Native Markdown component (iOS & Android)

  •    Javascript

All you need to do is import the react-native-simple-markdown and then use the <Markdown /> component. <Markdown /> will apply its style by default. However you can pass a styles prop to customize it has you wish.

react-native-markdown - Markdown component for React Native

  •    Javascript

A component for rendering Markdown in React Native. Pull requests welcome. All you need is to require the react-native-markdown module and then use the <Markdown/> tag.

react-mde - React Markdown Editor

  •    TypeScript

A simple yet powerful and extensible Markdown Editor editor for React. React-mde is built on top of Draft.js. React-mde is a completely controlled component.

ssr-with-prepack-hackathon - ReactDOMServer + experimental Prepack (React) compiler

  •    Javascript

Around two weeks ago, as part of a 2 day hackathon, I wanted to see if it was possible to build on top of our work on Prepack and ahead-of-time compile a React app, optimized for server-side rendering only. My goal was to see if it was possible to eliminate React completely from the bundle and generate a simple JS file with the minimal logic necessary to render the HTML. To keep my scope for this hackathon small, I aimed solely to get on getting our existing Hacker News benchmark, written in React, to have 100% the same HTML output the non-compiled version generates.

react-remarkable - A React component for rendering Markdown with remarkable

  •    Javascript

A React component for rendering Markdown with remarkable. Shortly you'll see that markdown syntax highlighting is enabled.

remark - A simple, in-browser, markdown-driven slideshow tool.

  •    Javascript

Check out this remark slideshow for a brief introduction. To render your Markdown-based slideshow on the fly, checkout Remarkise.

html-to-react-components - Converts HTML pages into React components

  •    Javascript

Extract annotated portions of HTML into React components as separate modules. The structure of HTML is preserved by importing child components and replacing appropriate pieces of HTML with them. As a result you get an entire components tree ready to be rendered. This utility was designed to free React developers from a boring task of translating HTML into components.

react-native-htmlview - A React Native component which renders HTML content as native views

  •    Javascript

A component which takes HTML content and renders it as native views, with customisable style and handling of links, etc. If you're getting the error "undefined is not an object (evaluating 'RCTLinkingManager.openURL’)” from the LinkingIOS API, try adding ‘RCTLinking' to the project's 'Linked Frameworks and Libraries’. You might have to find RCTLinking.xcodeproj in the react-native package dir and drag that into your main Xcode project first.

react-magic - Automatically AJAXify plain HTML with the power of React. It's magic!

  •    Javascript

React-Magic is an experimental library that uses the power of Facebook's React library to inject AJAX-loading goodness into plain old HTML webpages, without having to write any custom JavaScript. You can even use CSS transitions between the pages. Simply add a single script tag (or click a bookmarklet) and "it just works".HTMLtoJSX is a component of React-Magic that converts HTML to JSX. It can be used standalone, either on the web or via Node.js.

react-rte - Pure React rich text "WYSISYG" editor based on draft-js.

  •    Javascript

This is a UI component built completely in React that is meant to be a full-featured textarea replacement similar to CKEditor, TinyMCE and other rich text "WYSIWYG" editors. It's based on the excellent, open source Draft.js from Facebook which is performant and production-tested. RichTextEditor is the main editor component. It is comprised of the Draft.js <Editor>, some UI components (e.g. toolbar) and some helpful abstractions around getting and setting content with HTML/Markdown.