npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-markdown-simple

v2.1.0

Published

Render Markdown in React Native with native components (iOS & Android)

Downloads

15

Readme

react-native-simple-markdown

Build Status npm version npm Open Source Love

A component for rendering Markdown in React Native with native components, working with both iOS & Android. Pull requests are welcome 😃 🎉!

Getting started

yarn add react-native-simple-markdown

Usage

All you need is import the react-native-simple-markdown and then use the <Markdown /> component.

import React from 'react'
import Markdown from 'react-native-simple-markdown'

const MyAwesomeApp = () => {
  return (
    <Markdown styles={styles}>
      #Markdown in react-native is so cool!

      You can **emphasize** what you want, or just _suggest it_ 😏…

      You can even [link your website](http://charlesmangwa.surge.sh) or if you prefer: [email somebody](mailto:[email protected])

      Spice it up with some GIF 💃:

      ![Some GIF](https://media.giphy.com/media/dkGhBWE3SyzXW/giphy.gif)

      And even add a cool video 😎!

      [![A cool video from YT](https://img.youtube.com/vi/dQw4w9WgXcQ/0.jpg)](http://www.youtube.com/watch?v=dQw4w9WgXcQ)

      [![Another one from Vimeo](https://i.vimeocdn.com/video/399486266_640.jpg)](https://vimeo.com/57580368)
    </Markdown>    
  )
}

const styles = {
  heading1: {
    fontSize: 22,
  },
  strong: {
    fontSize: 18,
  },
  paragraph: {
    fontSize: 14,
  },
  view: {
    borderWidth: 1,
  },
}

Properties

styles

The Markdown will apply its style by default. However you can pass a styles prop to customize it has you want.

Example:

<Markdown
  styles={{
    heading1: {
      fontSize: 20,
    },
    strong: {
      fontWeight: 'bold',
    }
  }}
>
  #Hello 👋
</Markdown>

rules

The 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!

Example:

<Markdown
  rules={{
    image: {
      react: (node, output, state) => (
        <CustomImageComponent
          key={state.key}
          source={{ uri: node.target }}
        />
      ),
    },
  }}
>
  ![Alt text](/path/to/img.jpg)
</Markdown>

RNSM 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.

Example:

<Markdown
  styles={ markdownStyles }
  whitelist={['link', 'url']}
>
  { description }
</Markdown>

Will only apply the default styles for link and url. 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.

Features

  • blockQuote (<View>) - Also blockQuoteBar and blockQuoteText
  • br (<Text>)
  • del (<Text>)
  • em (<Text>)
  • hr (<View>)
  • heading (<Text>) - Also heading1 through heading6
  • inlineCode (<Text>)
  • image (<Image>) - You can use resizeMode in <Markdown /> styles prop to set a resizeMode
  • link (Text)
  • list (<View>) - Also listItem (<View>), listItemBullet (<Text>), listItemBulletType (Unicode character), listItemNumber (<Text>) and listItemText (<Text>)
  • mailTo (Text)
  • paragraph (<View>)
  • plainText (<Text>) - Use for styling text without any associated styles
  • strong (<Text>)
  • table (<View>)
  • tableHeader (<View>)
  • tableHeaderCell (<Text>)
  • tableRow (<View>)
  • tableRowCell (<View>)
  • tableRowLast (<View>, inherits from tableRow)
  • text (<Text>) - Inherited by all text based elements
  • u (<View>)
  • url (<Text>)
  • video (<Image>) - Supports Youtube & Vimeo
  • view (<View>) - This is the View container where the Markdown is render.

WIP

Most of these elements can be used, but I'm still working on some improvements. Pull requests are welcome!

  • autolink (<Text>)
  • codeBlock (<Text>)

Credits

This project was forked from react-native-markdown by @lwansbrough.