use-transpiler

0.1.1 verified Fri May 01 auth: no javascript

A lightweight React hook for transpiling JavaScript code on-the-fly using popular transpilers like Babel, TypeScript, etc. Version 0.1.1 is the initial release, currently in early development with an unstable API. The hook is designed for use in sandboxes, REPLs, or code editors where real-time transpilation is needed. It differs from alternatives by being a simple React hook that integrates directly with Babel or TypeScript transpilers, without requiring a build step. However, it is a work-in-progress and not recommended for production use.

Common errors

error useTranspiler is not a function ↓

cause Default import used instead of named import.

fix

Change to import { useTranspiler } from 'use-transpiler'

error Cannot destructure property 'transpile' of ... useTranspiler(...) is undefined ↓

cause Missing transform function in config object.

fix

Provide a transform key with a transpiler function.

Warnings

breaking API is unstable and may change without notice in future versions. ↓

fix Pin to exact version and review changelog before upgrading.

deprecated No versions are deprecated yet, but the package is in early development. ↓

fix Consider waiting for a stable release before using in production.

gotcha The 'transform' option must be provided; otherwise the hook throws an error. ↓

fix Always supply a valid transpiler function.

Install

npm install use-transpiler

yarn add use-transpiler

pnpm add use-transpiler

Imports

useTranspiler

wrong

import useTranspiler from 'use-transpiler'

correct

import { useTranspiler } from 'use-transpiler'

The hook is a named export, not a default export.

default

wrong

const useTranspiler = require('use-transpiler')

correct

import { useTranspiler } from 'use-transpiler'

ESM import only; CommonJS require() returns an object with named exports.

useTranspiler

wrong

const useTranspiler = require('use-transpiler')

correct

const { useTranspiler } = require('use-transpiler')

CommonJS users must destructure the named export.

Quickstart

Demonstrates basic usage of useTranspiler hook to transpile code with Babel on button click.

import { useTranspiler } from 'use-transpiler';
import { transformSync } from '@babel/core';

function MyComponent() {
  const { transpile, result, error } = useTranspiler({
    transform: (code) => transformSync(code, { presets: ['@babel/preset-env'] }),
  });

  const handleClick = () => {
    transpile('const x = () => {};');
  };

  return (
    <div>
      <button onClick={handleClick}>Transpile</button>
      {result && <pre>{result.code}</pre>}
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}