Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | 1x 1x 6x 6x 1x 1x 1x | // Required for all new components
import React from 'react';
import { lucidClassNames } from '../../util/style-helpers';
import { FC, StandardProps } from '../../util/component-types';
const cx = lucidClassNames.bind('&-ExampleComponent');
export interface IExampleComponentProps
extends StandardProps,
React.DetailedHTMLProps<
React.DOMAttributes<HTMLDivElement>,
HTMLDivElement
> {
/**
* Appended to the component-specific class names set on the root
* element.
*/
className?: string;
/**
* Any valid React children. This wraps your new component around whatever other React children consumers
* of your component may choose to use. If consumers can not use any/all React children. Be sure to call
* that out here.
*/
children?: any;
/**
* Example of a boolean prop.
* Used in this example to control an additional classname
* `lucid-ExampleComponent-isX' on the root element.
*/
isX?: boolean;
/**
* Example of a customizable component function. Always show the signature.
*
* Signature: `(item, { event, props }) => {}`
*/
onX?: ({ event, props }: { event: React.MouseEvent; props: any }) => void;
/**
* Passed through to the root element.
*/
style?: object;
}
export const ExampleComponent: FC<IExampleComponentProps> = ({
className,
children,
isX,
style,
}): React.ReactElement => {
const handleX = () => {
alert('This is an example of a handler function');
};
return (
<div
className={cx('&', className, {
'&-isX': isX,
})}
style={style}
onClick={handleX}
>
{children}
</div>
);
};
/**
* {"categories": ["category"]}
*
* Update the "category" array to set the category or categories your component falls under.
* You can see available categories in the Storybook left hand column.
*
* Describe your component here. How it should be used, use cases and more.
* Please see examples for more information.
*/
ExampleComponent.categories = ['Documentation'];
ExampleComponent.description = `An example component`;
ExampleComponent.displayName = 'ExampleComponent';
export default ExampleComponent;
|