or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-utilities.mddevelopment-styling.mddom-utilities.mdindex.mdreact-components.mdreact-hooks.md
tile.json

tessl/npm-rc-util

Common utility functions and components specifically designed for React development.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/rc-util@4.21.x

To install, run

npx @tessl/cli install tessl/npm-rc-util@4.21.0

index.mddocs/

rc-util

rc-util provides a comprehensive collection of utility functions and components specifically designed for React development. It offers DOM manipulation utilities, React-specific helpers, developer tools, and cross-browser compatibility solutions for building React component libraries and applications.

Package Information

  • Package Name: rc-util
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install rc-util

Core Imports

import createChainedFunction from 'rc-util/lib/createChainedFunction';
import warning from 'rc-util/lib/warning';
import Portal from 'rc-util/lib/Portal';
import { hasClass, addClass } from 'rc-util/lib/Dom/class';

For CommonJS:

const createChainedFunction = require('rc-util/lib/createChainedFunction');
const warning = require('rc-util/lib/warning');
const Portal = require('rc-util/lib/Portal');
const { hasClass, addClass } = require('rc-util/lib/Dom/class');

Basic Usage

import createChainedFunction from 'rc-util/lib/createChainedFunction';
import warning from 'rc-util/lib/warning';
import Portal from 'rc-util/lib/Portal';

// Chain multiple functions
const combinedHandler = createChainedFunction(
  () => console.log('first'),
  () => console.log('second')
);

// Conditional warnings
warning(user.name, 'User name is required');

// Render to container
<Portal getContainer={() => document.getElementById('modal-root')}>
  <div>Modal content</div>
</Portal>

Architecture

rc-util is organized around several key utility areas:

  • Core Utilities: Essential helper functions for chaining, warnings, and unique ID generation
  • React Components: Portal rendering and container management components
  • DOM Utilities: Cross-browser DOM manipulation, measurement, and event handling
  • React Hooks: Custom hooks for state management and lifecycle optimization
  • Development Tools: Deprecation warnings and debugging utilities

Capabilities

Core Utilities

Essential utility functions for common React development patterns including function chaining, unique ID generation, and developer warnings.

function createChainedFunction(...functions): Function;
function guid(): string;
function warn(msg: string): void;
function warning(valid: boolean, message: string): void;

Core Utilities

React Components

Ready-to-use React components for portal rendering and container management, essential for modals, tooltips, and overlay components.

class Portal extends React.Component {
  static propTypes: {
    getContainer: PropTypes.func.isRequired,
    children: PropTypes.node.isRequired,
    didUpdate: PropTypes.func
  }
}

React Components

DOM Utilities

Comprehensive DOM manipulation utilities covering CSS operations, event handling, focus management, and cross-browser compatibility for element measurement and styling.

function hasClass(node: HTMLElement, className: string): boolean;
function addClass(node: HTMLElement, className: string): void;
function get(node: HTMLElement, name?: string): any;
function getOffset(node: HTMLElement): { left: number, top: number };

DOM Utilities

React Hooks

Modern React hooks for state management, memoization, and lifecycle optimization with enhanced functionality beyond standard React hooks.

function useControlledState<T, R = T>(
  defaultStateValue: T | (() => T),
  option?: {
    defaultValue?: T | (() => T);
    value?: T;
    onChange?: (value: T, prevValue: T) => void;
    postState?: (value: T) => T;
  }
): [R, (value: T) => void];

React Hooks

Development & Styling

Development tools and styling utilities including deprecation warnings, attribute filtering, layout effect management, debug utilities, and test helpers.

function deprecated(props: string, instead: string, component: string): void;
function pickAttrs(props: object, ariaOnly?: boolean): object;
function switchScrollingEffect(close?: boolean): void;
function diff(obj1: any, obj2: any, depth?: number): Array;

Development & Styling

Types

interface SetStyleOptions {
  element?: HTMLElement;
}

type EventHandler = (e: Event) => void;
type RefCallback<T> = (node: T) => void;
type ElementClass = Function;
type Property = PropertyDescriptor | Function;