I recently delved into the world of React. I've been using it to build a design system library for my work, which consists of standalone UI components tailored for use in React applications.
I've developed a specific approach to managing the state and events of my components, exemplified by this button component:
import { composeEventHandlers } from '../../utils/events';
import './button.scss';
import classNames from 'classnames';
// ...
type Size =
| 'small'
| 'medium'
| 'large';
type Type =
| 'primary'
| 'secondary'
| 'outline';
interface ButtonProps {
id?: string;
children: string | string[];
size?: Size;
type?: Type;
fullWidth?: boolean;
disabled?: boolean;
loading?: boolean;
pressed?: boolean;
textAlign?: TextAlign;
onClick?(): void;
onFocus?(): void;
onBlur?(): void;
onMouseEnter?(): void;
onMouseLeave?(): void;
}
/**
* Button component
*/
export const Button = ({
children,
size,
type,
disabled = false,
loading = false,
pressed = false,
fullWidth,
onClick,
onFocus,
onBlur,
onMouseEnter,
onMouseLeave,
}: ButtonProps) => {
const [isHovered, setIsHovered] = useState(false);
const [isFocused, setIsFocused] = useState(false);
const [isPressed, setIsPressed] = useState(pressed);
const handleClick = _ => {
setIsPressed(true);
}
const handleFocus = _ => {
setIsFocused(true);
}
const handleBlur = _ => {
setIsFocused(false);
}
const handleMouseEnter = _ => {
setIsHovered(true);
}
const handleMouseLeave = _ => {
setIsHovered(false);
}
const prefix = usePrefix();
const buttonClasses = classNames(
`${prefix}--btn`,
`${prefix}--btn--${type}`,
`${prefix}--btn--${abbreviate(size)}`,
{
[`${prefix}--btn--full-width`]: fullWidth,
[`${prefix}--btn--disabled`]: disabled,
[`${prefix}--btn--loading`]: loading,
[`${prefix}--btn--pressed`]: isPressed,
[`${prefix}--btn--hovered`]: isHovered,
[`${prefix}--btn--focused`]: isFocused,
}
);
const eventHandlers = {
onClick: composeEventHandlers([onClick, handleClick]),
onFocus: composeEventHandlers([onFocus, handleFocus]),
onBlur: composeEventHandlers([onBlur, handleBlur]),
onMouseEnter: composeEventHandlers([onMouseEnter, handleMouseEnter]),
onMouseLeave: composeEventHandlers([onMouseLeave, handleMouseLeave]),
}
const buttonMarkup =
<button
type="button"
className={buttonClasses}
{...eventHandlers}
>
{loading
? <Loader size='small' type={type === 'primary' ? 'secondary' : 'primary'></Loader>
: children
}
</button>
;
return buttonMarkup;
};
In my CSS file, I dynamically adjust the component's style based on the CSS classes determined during runtime by the component's state:
.#{$prefix}--btn {
// ...
// SIZES
&.#{$prefix}--btn--sm {
width: auto;
height: 32px;
font-size: 14px;
}
// ...
// COLORS
&.#{$prefix}--btn--primary {
baclground-color: $primary-color
}
// ...
// STATES
&.#{$prefix}--btn--pressed, &.#{$prefix}--btn--hovered, &.#{$prefix}--btn--focused {
cursor: pointer;
@include darken-background();
}
&.#{$prefix}--btn--disabled {
background-color: $disbaled-color;
color: $secondary-color;
outline: none;
cursor: no-drop !important;
}
}
Classnames is a handy JavaScript utility that allows for conditional concatenation of class names.
I also utilize a utility function composeEventHandlers to enable consumers to add their own event listeners in addition to the default ones defined in the component.
My queries are:
Is this method of handling component style states efficient? How does it compare to using CSS pseudo-classes like :hover or :active? I have concerns about introducing a layer of JS to update styles, which might impact performance negatively.
Are there any poor practices in my implementation elsewhere? Is there room for improvement or a better approach?
This marks one of the initial components in my design system, and I am dedicated to adhering to best practices right from the start. Your insights would be greatly valued.