CoastalCommitsPastes/client/app/components/input/index.tsx
2022-11-16 00:49:12 -08:00

38 lines
778 B
TypeScript

import React from "react"
import styles from "./input.module.css"
type Props = React.HTMLProps<HTMLInputElement> & {
label?: string
width?: number | string
height?: number | string
}
// eslint-disable-next-line react/display-name
const Input = React.forwardRef<HTMLInputElement, Props>(
({ label, className, width, height, ...props }, ref) => {
const classes = [styles.input, styles.withLabel, className].join(" ")
return (
<div
className={styles.wrapper}
style={{
width,
height
}}
>
{label && <label className={styles.label}>{label}</label>}
<input
ref={ref}
className={classes}
{...props}
style={{
width,
height,
...(props.style || {})
}}
/>
</div>
)
}
)
export default Input