{"id":26575,"library":"use-transpiler","title":"use-transpiler","description":"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.","status":"active","version":"0.1.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install use-transpiler","lang":"bash","label":"npm"},{"cmd":"yarn add use-transpiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add use-transpiler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for React hook integration","package":"react","optional":true}],"imports":[{"note":"The hook is a named export, not a default export.","wrong":"import useTranspiler from 'use-transpiler'","symbol":"useTranspiler","correct":"import { useTranspiler } from 'use-transpiler'"},{"note":"ESM import only; CommonJS require() returns an object with named exports.","wrong":"const useTranspiler = require('use-transpiler')","symbol":"default","correct":"import { useTranspiler } from 'use-transpiler'"},{"note":"CommonJS users must destructure the named export.","wrong":"const useTranspiler = require('use-transpiler')","symbol":"useTranspiler","correct":"const { useTranspiler } = require('use-transpiler')"}],"quickstart":{"code":"import { useTranspiler } from 'use-transpiler';\nimport { transformSync } from '@babel/core';\n\nfunction MyComponent() {\n  const { transpile, result, error } = useTranspiler({\n    transform: (code) => transformSync(code, { presets: ['@babel/preset-env'] }),\n  });\n\n  const handleClick = () => {\n    transpile('const x = () => {};');\n  };\n\n  return (\n    <div>\n      <button onClick={handleClick}>Transpile</button>\n      {result && <pre>{result.code}</pre>}\n      {error && <p>Error: {error.message}</p>}\n    </div>\n  );\n}","lang":"typescript","description":"Demonstrates basic usage of useTranspiler hook to transpile code with Babel on button click."},"warnings":[{"fix":"Pin to exact version and review changelog before upgrading.","message":"API is unstable and may change without notice in future versions.","severity":"breaking","affected_versions":"0.x"},{"fix":"Consider waiting for a stable release before using in production.","message":"No versions are deprecated yet, but the package is in early development.","severity":"deprecated","affected_versions":"0.1.0"},{"fix":"Always supply a valid transpiler function.","message":"The 'transform' option must be provided; otherwise the hook throws an error.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Change to `import { useTranspiler } from 'use-transpiler'`","cause":"Default import used instead of named import.","error":"useTranspiler is not a function"},{"fix":"Provide a `transform` key with a transpiler function.","cause":"Missing transform function in config object.","error":"Cannot destructure property 'transpile' of ... useTranspiler(...) is undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}