@clerk/clerk-js
Version:
Clerk JS library
42 lines (41 loc) • 1.56 kB
TypeScript
import React from 'react';
import type { ThemableCssProp } from '../styledSystem';
import type { ElementDescriptor, ElementId } from './elementDescriptors';
type Customizable<T = Record<never, never>> = T & {
/**
* elementDescriptor - An optional property that can be an `ElementDescriptor` or an array of `ElementDescriptor` or `undefined`. This property is used to describe the elements for styling purposes.
*
* @example
* ```tsx
* <Box
* elementDescriptor={[descriptors.icon, descriptors.iconInitials]}
* />
*
* // Output: `cl-icon cl-iconInitials`
* ```
*/
elementDescriptor?: ElementDescriptor | Array<ElementDescriptor | undefined>;
/**
* elementId - An optional property that can be an `ElementId`. This property is used to set a unique identifier for the element.
*
* @example
* ```tsx
* <Box
* elementDescriptor={[descriptors.icon, descriptors.iconInitials]}
* elementId={descriptors.icon.setId(id)}
* />
*
* // Output: `cl-icon cl-iconInitials cl-icon__google cl-iconInitials__google`
* ```
*/
elementId?: ElementId;
css?: never;
sx?: ThemableCssProp;
};
type CustomizablePrimitive<T> = React.FunctionComponent<Customizable<T>>;
type MakeCustomizableOptions = {
defaultStyles?: ThemableCssProp;
defaultDescriptor?: ElementDescriptor;
};
export declare const makeCustomizable: <P>(Component: React.FunctionComponent<P>, options?: MakeCustomizableOptions) => CustomizablePrimitive<P>;
export {};