material-ui-linkify

material-ui-linkify

Converts links in text to Material-UI Links using the Markdown-it Linkify-it library
Uses https://github.com/markdown-it/linkify-it
Inspired by https://github.com/tasti/react-linkify/

Installation

npm install material-ui-linkify --save

Usage

To use Material-UI-Linkify, add it ahead of any component you think might contain links

<MuiLinkify>
  <Typography variant="body1">
    See source code at https://github.com/alexplumb/material-ui-linkify
  </Typography>
</MuiLinkify>

Properties

schema - A linkify-it schema for adding linkify processors. Example for adding Twitter:

{
  '@': {
    validate (text, pos, self) {
      const tail = text.slice(pos);

      if (!self.re.twitter) {
        self.re.twitter =  new RegExp(
          `^([a-zA-Z0-9_]){1,15}(?!_)(?=$|${self.re.src_ZPCc})`,
        );
      }
      if (self.re.twitter.test(tail)) {
        // Linkifier allows punctuation chars before prefix,
        // but we additionally disable `@` ("@@mention" is invalid)
        if (pos >= 2 && tail[pos - 2] === '@') {
          return false;
        }
        return tail.match(self.re.twitter)[0].length;
      }
      return 0;
    },
    normalize: (match) => {
      match.url = `https://twitter.com/${match.url.replace(/^@/, '')}`;
    },
  },
}

options: See https://github.com/markdown-it/linkify-it#new-linkifyitschemas-options for options

LinkProps: Properties that you want to pass along to the Link component. See https://material-ui.com/api/link/ for the full API

Changelog

[1.0.1] - 2019-03-22

Changed

• Optimized build size