tessl/npm-rc-util
Common utility functions and components specifically designed for React development.
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
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;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
}
}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 };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];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;Types
interface SetStyleOptions {
element?: HTMLElement;
}
type EventHandler = (e: Event) => void;
type RefCallback<T> = (node: T) => void;
type ElementClass = Function;
type Property = PropertyDescriptor | Function;Install with Tessl CLI
npx tessl i tessl/npm-rc-util- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
- Publish Source
- CLI
- Badge
