mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
* feat(docs): add example how to set locale (#2867) * docs(guide): add an explanation for the installation guide (#2769) * docs(guide): add an explanation for the installation guide * docs(guide): add an explanation for the cli guide * docs(guide): add support for cli output * fix: change sort priority - cmdk (#2873) * docs: remove unsupported props in range calendar and date range picker (#2881) * chore(calendar): remove showMonthAndYearPickers from range calendar story * docs(date-range-picker): remove showMonthAndYearPickers info * docs(range-calendar): remove unsupported props * docs: refactor typing in form.ts (#2882) * chore(docs): supplement errorMessage behaviour in input (#2892) * refactor(docs): revise NextUI Provider structure * chore(docs): add updated tag --------- Co-authored-by: Nozomi-Hijikata <116155762+Nozomi-Hijikata@users.noreply.github.com> Co-authored-by: HaRuki <soccer_haruki15@me.com> Co-authored-by: Kaben <carnoxen@gmail.com>
36 lines
764 B
TypeScript
36 lines
764 B
TypeScript
const App = `import {Input} from "@nextui-org/react";
|
|
|
|
export default function App() {
|
|
const [value, setValue] = React.useState("junior2nextui.org");
|
|
|
|
const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i);
|
|
|
|
const isInvalid = React.useMemo(() => {
|
|
if (value === "") return false;
|
|
|
|
return validateEmail(value) ? false : true;
|
|
}, [value]);
|
|
|
|
return (
|
|
<Input
|
|
value={value}
|
|
type="email"
|
|
label="Email"
|
|
variant="bordered"
|
|
isInvalid={isInvalid}
|
|
color={isInvalid ? "danger" : "success"}
|
|
errorMessage="Please enter a valid email"
|
|
onValueChange={setValue}
|
|
className="max-w-xs"
|
|
/>
|
|
);
|
|
}`;
|
|
|
|
const react = {
|
|
"/App.jsx": App,
|
|
};
|
|
|
|
export default {
|
|
...react,
|
|
};
|