React Fast HOC

Lightweight and type-safe High-Order Components (HOCs) library for React, leveraging high-order types from hotscript and JavaScript Proxies for zero VDOM overhead.

Table of Contents

• Installation
• Usage
  • transformProps
  • createHoc
  • createTransformProps
• API Reference
• Examples
• License

Installation

Install the react-fast-hoc package:

pnpm:

pnpm i react-fast-hoc

npm:

npm i react-fast-hoc

yarn:

yarn add react-fast-hoc

Or with ni:

ni react-fast-hoc

Install the hotscript for creating complex props transformations:

ni -D hotscript

Examples

// without (extra VDOM overhead)
const BirthdayInput = React.forwardRef(
  (
    { onChange, value }: Pick<DatePickerProps, "value" | "onChange">,
    ref: null | DataPickerProps["ref"]
  ) => (
    <InputDate
      onChange={onChange}
      ref={ref}
      value={value ?? DEFAULT_DATE_OF_BIRTH}
      maxDate={MAXIMAL_DATE_OF_BIRTH}
      minDate={MINIMAL_DATE_OF_BIRTH}
    />
  )
);
// with (zero VDOM overhead, can be used multiple times)
import { transformProps } from "react-fast-hoc";

const BirthdayInput = transformProps(
  InputDate,
  ({
    onChange,
    value,
    ref,
  }: Pick<DatePickerProps, "ref" | "value" | "onChange">) => ({
    onChange,
    value: value ?? DEFAULT_DATE_OF_BIRTH,
    maxDate: MAXIMAL_DATE_OF_BIRTH,
    minDate: MINIMAL_DATE_OF_BIRTH,
    ref,
  }),
  { displayNameTransform: { type: "rewrite", value: "BirthdayInput" } }
);

Usage

transformProps

Directly create a new component with transformed props.

import { transformProps } from "react-fast-hoc";

const EnhancedComponent = transformProps(
  MyComponent,
  (props) => {
    // Transform props here
    return { ...props, transformedProp: "Transformed Value" };
  },
  { displayNameTransform: { type: "rewrite", value: "WithTransformedProps." } }
);

createHoc

Create a new HOC with a custom props transformer and optional display name prefix.

import { createHoc } from "react-fast-hoc";

const withCustomLogic = createHoc({
  propsTransformer: (props) => {
    // Apply custom logic here
    return { ...props, customProp: "Custom Value" };
  },
  resultTransformer: null,
  displayNameTransform: {
    type: "prefix",
    value: "WithCustomLogic.",
  },
});

const EnhancedComponent = withCustomLogic(MyComponent);

createTransformProps

Create a new HOC that transforms the props passed to the wrapped component.

import { createTransformProps } from "react-fast-hoc";

const withTransformedProps = createTransformProps(
  (props) => {
    // Transform props here
    return { ...props, transformedProp: "Transformed Value" };
  },
  {
    displayNameTransform: {
      type: "prefix",
      value: "WithTransformedProps.",
    },
  }
);

const EnhancedComponent = withTransformedProps(MyComponent);

You can use wrapIntoProxy to create more customizable hocs

API Reference

Detailed API documentation can be found in the API.md file.

Examples

You can find example usage of react-fast-hoc in the examples folder.

License

React Fast HOC is MIT licensed.

react-fast-hoc

0.3.2

Patch Changes

• 0920933: Removed deprecated api examples from README Fixes: #20

0.3.1

Patch Changes

• 32e18c1: Fixed wrapping into hoc in case of nested React.memo Resolves: #17

  const Component = transformProps(
    React.memo(
      React.memo((props) => {
        console.log(props); // prev: { c: 30 }, now: { a: 10, b: 20, c: 30 }
        return null;
      })
    ),
    (props) => ({ ...props, a: 10, b: 20 })
  );
  
  root.render(<Component c={30} />);

0.3.0

Minor Changes

• d2cc312: Deprecated mimicToNewComponent and make default to false (true was before)

• 8680658: Made displayName editable for each transformed component:

  const _ = transformProps(A, (props) => props, {
    displayNameTransform: {
      value: (name) => name + "C",
      type: "rewrite-dynamic",
    },
  });
  expect(_.displayName).toBe("AC");
  _.displayName = "D";
  expect(_.displayName).toBe("D");

• d2cc312: Added new syntax for name rewriting, old one is deprecated and will be removed soon

  Static name rewrite

  transformProps(B, (props) => props, {
    displayNameTransform: {
      type: "rewrite",
      value: "D",
    },
  });
  
  transformProps(A, (props) => props, {
    displayNameTransform: {
      type: "prefix",
      value: "CBC",
    },
  });

  Dynamic name rewrite

  transformProps(A, (props) => props, {
    displayNameTransform: {
      value: (name) => name + "C",
      type: "rewrite-dynamic",
    },
  });

• f057209: Added support for components wrapped with React.lazy

0.2.1

Patch Changes

• 3537998: Fix wrapIntoProxy type issue

0.2.0

Minor Changes

• 309bcff: Add oportunity to transform component directly, not only props

0.1.7

Patch Changes

• cc1dfd3: Moved build deps to devDependencies, and fixed type inference

0.1.6

Patch Changes

• 1fb53bb: Changed type to module

0.1.5

Patch Changes

• 5d82ea0: Trying to really add treeshaking

0.1.4

Patch Changes

• e2d3d88: Added RewriteCall proxy handler, can be used with wrapIntoProxy
• 695edfd: Added treeshaking

0.1.3

Patch Changes

• 780a15b: Updated readme

0.1.2

Patch Changes

• 2245bd5: Fixed displayName prop for anonymous components and display name rewrite turned off for production enviroment

0.1.1

Patch Changes

• 65ea788: Fixed types, changed docs. Hotscript moved to dev deps

0.1.0

Minor Changes

• ca39ecc: Added mimic to new component functionality. And changed createHoc options object api
• b5e5c89: Fixed types naming

Patch Changes

• 9966412: Added wrap into proxy function

0.0.3

Patch Changes

• de2fd9f: Added readme.md

0.0.2

Patch Changes

• 286920f: Added automatic release