or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-create-react-class

Legacy API for creating React components using the classical createClass syntax.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/create-react-class@15.7.x

To install, run

npx @tessl/cli install tessl/npm-create-react-class@15.7.0

index.mddocs/

create-react-class

create-react-class is a drop-in replacement for React.createClass, providing legacy API for creating React component classes. It maintains the original createClass interface including lifecycle methods, mixins support, and automatic method binding, serving as a compatibility layer for legacy React applications migrating from createClass syntax to newer React versions.

Package Information

  • Package Name: create-react-class
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install create-react-class

Core Imports

import createReactClass from "create-react-class";

For CommonJS:

const createReactClass = require("create-react-class");

For browser globals (UMD):

<script src="https://unpkg.com/create-react-class/create-react-class.min.js"></script>
<script>
  // Available as global createReactClass
</script>

Basic Usage

import React from "react";
import createReactClass from "create-react-class";

// Create a component class using the legacy API
const MyComponent = createReactClass({
  getInitialState() {
    return { count: 0 };
  },

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  },

  render() {
    return React.createElement("div", null,
      React.createElement("p", null, `Count: ${this.state.count}`),
      React.createElement("button", { onClick: this.handleClick }, "Increment")
    );
  }
});

// Use the component
React.render(React.createElement(MyComponent), document.getElementById("root"));

Capabilities

Component Class Creation

Creates React component classes using the legacy createClass API with automatic method binding and lifecycle support.

/**
 * Creates a React component class from a specification object
 * @param {ComponentSpec} spec - Component specification containing methods and configuration
 * @returns {ComponentConstructor} React component class constructor
 */
function createReactClass(spec: ComponentSpec): ComponentConstructor;

interface ComponentSpec {
  // Required method
  render(): ReactElement;
  
  // Lifecycle methods (optional)
  getInitialState?(): object | null;
  getDefaultProps?(): object;
  getChildContext?(): object;
  componentWillMount?(): void;
  UNSAFE_componentWillMount?(): void;
  componentDidMount?(): void;
  componentWillReceiveProps?(nextProps: object, nextContext?: object): void;
  UNSAFE_componentWillReceiveProps?(nextProps: object, nextContext?: object): void;
  shouldComponentUpdate?(nextProps: object, nextState: object, nextContext?: object): boolean;
  componentWillUpdate?(nextProps: object, nextState: object, nextContext?: object): void;
  UNSAFE_componentWillUpdate?(nextProps: object, nextState: object, nextContext?: object): void;
  componentDidUpdate?(prevProps: object, prevState: object, prevContext?: object): void;
  componentWillUnmount?(): void;
  
  // Configuration (optional)
  displayName?: string;
  mixins?: Mixin[];
  statics?: { [key: string]: any };
  propTypes?: { [key: string]: PropTypeValidator };
  contextTypes?: { [key: string]: PropTypeValidator };
  childContextTypes?: { [key: string]: PropTypeValidator };
  autobind?: boolean;
  
  // Static lifecycle methods (optional)
  getDerivedStateFromProps?(props: object, state: object): object | null;
  
  // Advanced (optional)
  updateComponent?(): void;
  
  // Custom methods (optional)
  [methodName: string]: any;
}

interface ComponentConstructor {
  new (props?: object, context?: object, updater?: object): ComponentInstance;
  displayName?: string;
  defaultProps?: object;
  propTypes?: { [key: string]: PropTypeValidator };
  contextTypes?: { [key: string]: PropTypeValidator };
  childContextTypes?: { [key: string]: PropTypeValidator };
  getDerivedStateFromProps?: (props: object, state: object) => object | null;
}

interface ComponentInstance {
  props: object;
  state: object | null;
  context: object;
  refs: { [key: string]: any };
  
  // Methods available on instances
  setState(partialState: object | ((prevState: object, props: object) => object), callback?: () => void): void;
  forceUpdate(callback?: () => void): void;
  
  // Legacy methods (deprecated)
  isMounted(): boolean;
  replaceState(newState: object, callback?: () => void): void;
}

interface Mixin {
  // Any valid ComponentSpec properties
  [key: string]: any;
}

type PropTypeValidator = (props: object, propName: string, componentName: string) => Error | null;

Lifecycle Method Policies

The createClass system supports different method composition policies:

  • DEFINE_ONCE: Method can only be defined once (e.g., render, shouldComponentUpdate)
  • DEFINE_MANY: Method can be defined multiple times, all versions will be called (e.g., lifecycle methods)
  • DEFINE_MANY_MERGED: Method results are merged if defined multiple times (e.g., getInitialState, getDefaultProps)

Automatic Method Binding

All non-React methods defined in the spec are automatically bound to the component instance unless autobind: false is specified.

const Component = createReactClass({
  handleClick() {
    // 'this' is automatically bound to component instance
    console.log(this.props.name);
  },
  
  render() {
    return React.createElement("button", { onClick: this.handleClick }, "Click me");
  }
});

Mixin Support

Components can include mixins to share functionality across multiple components.

const TimerMixin = {
  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ time: Date.now() });
    }, 1000);
  },
  
  componentWillUnmount() {
    clearInterval(this.timer);
  }
};

const TimedComponent = createReactClass({
  mixins: [TimerMixin],
  
  getInitialState() {
    return { time: Date.now() };
  },
  
  render() {
    return React.createElement("div", null, new Date(this.state.time).toString());
  }
});

Static Methods and Properties

Define static methods and properties using the statics configuration.

const Component = createReactClass({
  statics: {
    customMethod() {
      return "I'm a static method";
    },
    
    VERSION: "1.0.0"
  },
  
  render() {
    return React.createElement("div", null, Component.customMethod());
  }
});

PropTypes and Context Integration

Full support for PropTypes validation and React context.

const Component = createReactClass({
  propTypes: {
    name: PropTypes.string.isRequired,
    age: PropTypes.number
  },
  
  contextTypes: {
    theme: PropTypes.string
  },
  
  childContextTypes: {
    user: PropTypes.object
  },
  
  getChildContext() {
    return {
      user: { name: this.props.name, age: this.props.age }
    };
  },
  
  render() {
    const theme = this.context.theme || "default";
    return React.createElement("div", { className: theme }, this.props.name);
  }
});

Migration from React.createClass

This package provides a seamless migration path from the deprecated React.createClass:

Before (React <16):

const Component = React.createClass({
  render() {
    return React.createElement("div", null, "Hello");
  }
});

After (React 16+):

import createReactClass from "create-react-class";

const Component = createReactClass({
  render() {
    return React.createElement("div", null, "Hello");
  }
});

Error Handling

The package includes comprehensive error checking and provides detailed error messages for:

  • Missing required render method
  • Invalid component specifications
  • Method name conflicts
  • Mixin composition errors
  • PropTypes validation errors (development mode)

All errors include component names and helpful debugging information when available.

Development vs Production

  • Development: Includes warnings, PropTypes validation, and debugging information
  • Production: Strips development-only code for smaller bundle size
  • Environment detection via process.env.NODE_ENV

Browser Compatibility

Supports all browsers that React supports, with automatic polyfills for older environments through the build process.