Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @nteract/transforms with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var transforms = require("@nteract/transforms")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@nteract/transforms v4.4.7

Common transforms for Jupyter

nteract transforms

transformime

It's likely you don't need to use this package directly and can instead use a release of the display area (:soon:).

Installation

You may use whichever package manager (npm or yarn) best suits your workflow. The nteract team internally uses yarn.

npm install @nteract/transforms
# OR
yarn add @nteract/transforms

Note: React is a peer dependencies you'll have to install yourself.

Usage

Standard Jupyter Transforms

import {
  richestMimetype,
  standardDisplayOrder,
  standardTransforms,
} from '@nteract/transforms'

// Jupyter style MIME bundle
const bundle = {
  'text/plain': 'This is great',
  'image/png': 'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
}

// Find out which mimetype is the richest
const mimetype = richestMimetype(bundle, standardDisplayOrder, standardTransforms)

// Get the matching React.Component for that mimetype
let Transform = standardTransforms[mimetype]

// Create a React element
return <Transform data={bundle[mimetype]} />

Adding New Transforms

import {
  richestMimetype,
  registerTransform,
  standardTransforms,
  standardDisplayOrder,
} from '@nteract/transforms'

import geoTransform from '@nteract/transform-geojson'

const {
  transforms,
  displayOrder,
} = registerTransform({
  transforms: standardTransforms,
  displayOrder: standardDisplayOrder,
}, geoTransform)

...

const Transform = transforms[mimetype];

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free