transformime-react
Transforms MIMEtype+data to pure React Elements.
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 bundleconst bundle = new Immutable.Map({ 'text/plain': 'This is great', 'image/png': 'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'}); // Find out which mimetype is the richestconst mimetype = richestMimetype(bundle); // Get the matching React.Component for that mimetypelet Transform = transforms.get(mimetype); // Create a React elementreturn <Transform data={bundle.get(mimetype)} />;
which will return:
<img ='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>