Similar to #10331. Since React 19, refs can now be passed directly through props without the need for `React.forwardRef`. This greatly simplifies components types and overall syntax.
27 lines
577 B
TypeScript
27 lines
577 B
TypeScript
import React from 'react'
|
|
|
|
import classes from './index.module.scss'
|
|
|
|
type Props = {
|
|
children: React.ReactNode
|
|
className?: string
|
|
left?: boolean
|
|
ref?: React.Ref<HTMLDivElement>
|
|
right?: boolean
|
|
}
|
|
|
|
export const Gutter: React.FC<Props & { ref?: React.Ref<HTMLDivElement> }> = (props) => {
|
|
const { children, className, left = true, right = true, ref } = props
|
|
|
|
return (
|
|
<div
|
|
className={[left && classes.gutterLeft, right && classes.gutterRight, className]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
ref={ref}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|