1.1.0 • Published 9 years ago

transformime-react v1.1.0

Weekly downloads
13
License
BSD-3-Clause
Repository
github
Last release
9 years ago

transformime-react

Build Status

Transforms MIMEtype+data to pure React Elements.

Optimus MIME

Installation

npm install transformime-react

Note that react and immutable are peer dependencies; you'll need to install those as well if they're not in your project (hint: they're definitely needed to make this package useful at all).

npm install immutable@3.7.x react@0.14.x

Usage

import { richestMimetype, transforms } from 'transformime-react';
import Immutable from 'immutable';

// Jupyter style MIME bundle
const bundle = new Immutable.Map({
  'text/plain': 'This is great',
  'image/png': 'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
});

// Find out which mimetype is the richest
const mimetype = richestMimetype(bundle); 

// Get the matching React.Component for that mimetype
let Transform = transforms.get(mimetype);

// Create a React element
return <Transform data={bundle.get(mimetype)} />;

which will return:

<img src='data:image/png;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' />

as a React element. It chose 'image/png' as richer than 'text/plain' for representation.

Override the default transforms and display order

const myOrder = Immutable.List(['text/plain', 'image/png']);

const CodeAsText = React.createClass({
  render: function() {
    return (
      <code>{this.props.data}</code>
    );
  }
});

const myTransforms = transforms.set('text/plain', CodeAsText);

const mimetype = richestMimetype(bundle, myOrder, myTransforms); 
Transform = myTransforms.get(mimetype);

return <Transform data={bundle.get(mimetype)} />;

Using the bundle from above, we'll get back:

<code>This is great</code>
1.1.0

9 years ago

1.0.2

9 years ago

1.0.1

9 years ago

1.0.0

9 years ago

0.7.0

9 years ago

0.6.2

9 years ago

0.6.1

9 years ago

0.6.0

9 years ago

0.5.0

9 years ago

0.4.0

10 years ago

0.3.0

10 years ago

0.2.2

10 years ago

0.2.1

10 years ago

0.2.0

10 years ago

0.1.0

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago