mirror of
https://github.com/Steffo99/festa.git
synced 2024-12-23 07:04:22 +00:00
28 lines
706 B
TypeScript
28 lines
706 B
TypeScript
|
import * as React from "react"
|
||
|
|
||
|
export interface InputSlug extends React.HTMLProps<HTMLInputElement> {
|
||
|
onSlugChange?: (val: string) => void,
|
||
|
}
|
||
|
|
||
|
export function InputSlug(props: InputSlug) {
|
||
|
const [text, setText] = React.useState("")
|
||
|
|
||
|
const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
||
|
props.onChange?.(event)
|
||
|
|
||
|
let slug = event.target.value.toLowerCase().replaceAll(/[^a-z0-9]/g, "-")
|
||
|
props.onSlugChange?.(slug)
|
||
|
setText(slug)
|
||
|
},
|
||
|
[]
|
||
|
)
|
||
|
|
||
|
return (
|
||
|
<input
|
||
|
type="text"
|
||
|
value={text}
|
||
|
onChange={handleChange}
|
||
|
{...props}
|
||
|
/>
|
||
|
)
|
||
|
}
|