or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

Files

docs

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

core-utilities.mddocs/

0

# Core Utilities

1

2

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

3

4

## Capabilities

5

6

### createChainedFunction

7

8

Creates a function that calls all provided functions with the same arguments from left to right. Useful for combining multiple event handlers or callbacks.

9

10

```javascript { .api }

11

/**

12

* Safe chained function - only creates new function if needed

13

* @param {...Function} functions - Functions to chain together

14

* @returns {Function|null} Combined function or null if no valid functions

15

*/

16

function createChainedFunction(...functions): Function;

17

```

18

19

**Usage Example:**

20

21

```javascript

22

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

23

24

const handleClick = createChainedFunction(

25

() => console.log('Analytics tracked'),

26

() => setModalOpen(true),

27

onCustomClick

28

);

29

30

// All three functions will be called when handleClick is invoked

31

<button onClick={handleClick}>Open Modal</button>

32

```

33

34

### guid

35

36

Generates a globally unique identifier using timestamp and an incrementing seed value.

37

38

```javascript { .api }

39

/**

40

* Generate a global unique id across current application

41

* @returns {string} Unique identifier in format: timestamp_seed

42

*/

43

function guid(): string;

44

```

45

46

**Usage Example:**

47

48

```javascript

49

import guid from 'rc-util/lib/guid';

50

51

const uniqueId = guid(); // "1641234567890_0"

52

const anotherId = guid(); // "1641234567891_1"

53

54

// Useful for generating unique keys or IDs

55

const items = data.map(item => ({ ...item, id: guid() }));

56

```

57

58

### warn

59

60

Development-only console warning wrapper that only outputs in non-production environments.

61

62

```javascript { .api }

63

/**

64

* Log warning message in development mode only

65

* @param {string} msg - Warning message to display

66

*/

67

function warn(msg: string): void;

68

```

69

70

**Usage Example:**

71

72

```javascript

73

import warn from 'rc-util/lib/warn';

74

75

// Only warns in development

76

warn('This component will be deprecated in v2.0');

77

```

78

79

### warning

80

81

Advanced warning system with once-only functionality to prevent duplicate warnings. Provides multiple warning functions with different levels and caching.

82

83

```typescript { .api }

84

/**

85

* Log warning if condition is false

86

* @param {boolean} valid - Condition to check

87

* @param {string} message - Warning message

88

*/

89

function warning(valid: boolean, message: string): void;

90

91

/**

92

* Log note if condition is false

93

* @param {boolean} valid - Condition to check

94

* @param {string} message - Note message

95

*/

96

function note(valid: boolean, message: string): void;

97

98

/**

99

* Log warning once only for same message

100

* @param {boolean} valid - Condition to check

101

* @param {string} message - Warning message

102

*/

103

function warningOnce(valid: boolean, message: string): void;

104

105

/**

106

* Log note once only for same message

107

* @param {boolean} valid - Condition to check

108

* @param {string} message - Note message

109

*/

110

function noteOnce(valid: boolean, message: string): void;

111

112

/**

113

* Reset the warned messages cache

114

*/

115

function resetWarned(): void;

116

117

/**

118

* Internal helper function for once-only warnings

119

* @param {Function} method - Warning method to call

120

* @param {boolean} valid - Condition to check

121

* @param {string} message - Warning message

122

*/

123

function call(

124

method: (valid: boolean, message: string) => void,

125

valid: boolean,

126

message: string

127

): void;

128

```

129

130

**Usage Example:**

131

132

```javascript

133

import warningOnce, { warning, note, noteOnce, resetWarned, call } from 'rc-util/lib/warning';

134

135

// Basic warning

136

warning(props.name, 'Name prop is required');

137

138

// Warning that only shows once per message

139

warningOnce(false, 'This API is deprecated');

140

warningOnce(false, 'This API is deprecated'); // Won't show again

141

142

// Development note

143

noteOnce(props.experimental, 'Using experimental feature');

144

```

145

146

### deprecated

147

148

Logs deprecation warnings for props or features that will be removed in future versions.

149

150

```javascript { .api }

151

/**

152

* Log deprecation warning for props

153

* @param {string} props - Deprecated prop name

154

* @param {string} instead - Replacement to use instead

155

* @param {string} component - Component name where deprecation occurs

156

*/

157

function deprecated(props: string, instead: string, component: string): void;

158

```

159

160

**Usage Example:**

161

162

```javascript

163

import deprecated from 'rc-util/lib/deprecated';

164

165

// In component implementation

166

if (this.props.oldProp) {

167

deprecated('oldProp', 'newProp', 'MyComponent');

168

}

169

```