mirror of
https://github.com/Steffo99/festa.git
synced 2024-12-22 22:54:22 +00:00
28 lines
No EOL
706 B
TypeScript
28 lines
No EOL
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}
|
|
/>
|
|
)
|
|
} |