clsx-plus • Docs
A utility for generating class names with ease.
- Main Entry Point
- Secondary Entry Points
- React Hooks
- Variables
- Types and Constants
- Implementation Details
The entry point for the library. This is the default export and the main function that is used to generate class names.
| Function | Description |
|---|---|
| tw | The tag template literal function that generates a class name string |
These items are used to create new instances of the clsxPlus function with custom configurations or identifiers.
| Class, Function | Description |
|---|---|
| ClsxPlusConfig | A configuration object for the clsxPlus function. |
| createClsxPlusFn | Creates a new instance of the clsxPlus function, optionally with a custom identifier and configuration. |
Generally speaking, you should able to use the default export and ignore the hooks provided in
this library. However, if you need to leverage the caching system and want to isolate the
cache for a specific component, you can use the useClsxPlus or useCachedClsxPlus hook.
| Function | Description |
|---|---|
| useCachedClsxPlus | A React hook for creating a clsxPlus function with caching automatically enabled. |
| useClsxPlus | A React hook for creating a customized clsxPlus function. |
Global variables that can be modified to change the behavior of the library.
| Variable | Description |
|---|---|
| GlobalClsxPlusConfig | The global configuration object for the clsxPlus function. This is used as the default configuration for all instances unless overridden. |
For the most part, these types and constants are used internally by the library. However, there are a few types that are exported for use cases when you need to extend the library or create custom hooks.
| Namespace, Interface, Type alias | Description |
|---|---|
| Constants | Constants used throughout the library. |
| ReturnValue | - |
| BoundDeferredValueFn | A function that creates a new instance of the DeferredValue class with config already bound. |
| CalculationFn | A function that calculates a value based on the provided arguments. |
| CalculationFnMeta | Metadata for a calculation function used in the deferred value cache. |
| ClsxPlusFn | The main export of the library. It is a tag template literal function with a callback-based alternative signature. |
| CssVars | A type that represents a collection of CSS variables. The keys should NOT include the -- prefix (it will be added automatically). |
| DefaultIdent | A special type that follows these rules based on the environment variable CLSX_PLUS_DEFAULT_FN_IDENT: - If it is NOT declared, it will equal typeof Constants.FALLBACK_IDENT. - If it is declared as a single string literal, it will equal typeof Constants.DEFAULT_IDENT. - If it is declared as anything else, it will equal never. |
| EqualityChecker | A function that checks if the arguments of a calculation function have changed. |
| InlineStyles | A type that represents a collection of inline styles. |
| ReturnValueMeta | A type that represents the return value of a clsxPlus function used in the return value cache. |
| StringConstant | A type that ensures the input is an exact string constant. Union types will result in never. |
| StyleDeclaration | A more flexible type for defining CSS styles. |
| StyleValue | A type that represents a CSS value. |
| UnionToIntersection | Taken from https://stackoverflow.com/a/50375286 |
| UnsupportedValueError | An error type that is thrown when a value is not supported. |
These items are used internally by the library and are not intended for public use. They are exported for documentation and type-checking purposes only.
| Class, Function | Description |
|---|---|
| Cache | A simple cache that stores values based on a key and a timestamp. |
| CacheKeyBuilder | A utility class for building cache keys from a sequence of exotic values. |
| DeferredValue | A class that represents a deferred value. This is used to cache the return value of a calculation function. |
| createCssVars | A utility function for creating a map of CSS variables. |
| createInlineStyles | A utility function for creating a map of inline styles. |
| cssFn | Create a map of inline styles parsed from a template string. The template string should be a CSS-like syntax. |
| deferredValueFn | Creates a new instance of the DeferredValue class. |
| isCssVars | A type guard that checks if a value is a CssVars object. |
| isInlineStyles | A type guard that checks if a value is an InlineStyles object. |
| joinParts | A utility function for joining template strings and extra values. |
| serializeCacheKeyValue | A utility function for serializing cache key values. This function uses JSON.stringify to serialize the value. If the value is a function, it will be serialized via .toString(). |
| serializeStyleValue | Convert a value to a string suitable for use in a CSS declaration. |
| styleDeclarationFn | Create a map of inline styles from an object. |
| varsFn | Create a map of CSS variables from an object. |