How to use little-state-machine - 10 common examples
To help you get started, we’ve selected a few little-state-machine examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
react-hook-form / react-hook-form-website / src / components / HomePage.tsx View on Github 
search: string
pathname: string
}
defaultLang: string
}) {
const [submitData, updateSubmitData] = useState({})
const [showBuilder, toggleBuilder] = useState(false)
const HomeRef = useRef(null)
const [isPlayFeature, setFeaturePlay] = useState(false)
const [isPlayCodeCompare, setCodeComparePlay] = useState(false)
const [isIsolatePlay, setIsolatePlay] = useState(false)
const [isPlayRender, setRenderPlay] = useState(false)
const [formUpdated, setFormUpdated] = useState(false)
const {
state: { language },
} = useStateMachine()
const { currentLanguage } =
language && language.currentLanguage
? language
: { currentLanguage: defaultLang }
const onSubmit = data => {
updateSubmitData(data)
}
useEffect(() => {
if (location.search.startsWith("?goToDemo")) {
setTimeout(() => {
HomeRef.current.scrollIntoView({ behavior: "smooth" })
if (location.search.startsWith("?goToDemo&updated=true")) {
setFormUpdated(true)data,
url,
withOutCopy,
isExpo,
style,
}: {
rawData?: string
data?: string
url?: string
withOutCopy?: boolean
isExpo?: boolean
style?: any
}) {
const {
state: { language },
} = useStateMachine()
const { currentLanguage } =
language && language.currentLanguage ? language : { currentLanguage: "en" }
return (
<section style="{{">
{!withOutCopy && (
{
copyClipBoard(rawData || generateCode(data))
alert(generic.copied[currentLanguage])
}}</section>formUpdated: boolean
currentLanguage: string
}) {
const {
register,
errors,
handleSubmit,
watch,
formState: { touched },
reset,
} = useForm({
mode: "onChange",
})
const {
state: { formData },
} = useStateMachine()
return (
<>
<h1>{home.liveDemo[currentLanguage].title}</h1>
{formUpdated && (
(
<p style="{{">
Note: your form have been updated.
</p>
)}const pageContentRef = useRef({
AccessibilityA11y: null,
WizardFormFunnel: null,
SmartFormComponent: null,
FieldArrays: null,
SchemaValidation: null,
ConnectForm: null,
FormContextPerformance: null,
ErrorMessage: null,
ConditionalControlledComponent: null,
ControlledmixedwithUncontrolledComponents: null,
})
const {
state: { language },
} = useStateMachine()
const { currentLanguage } =
language && language.currentLanguage
? language
: { currentLanguage: defaultLang }
const advanced = advancedContent[currentLanguage]
const links = [
advanced.accessibility,
advanced.wizard,
advanced.smartForm,
advanced.fieldArrays,
advanced.schema,
advanced.errorMessage,
advanced.connectForm,
advanced.formContext,
advanced.conditionalControlledComponent,function ApiPage({
formData,
defaultLang,
}: {
formData?: any
defaultLang: string
}) {
const {
state: { language },
} = useStateMachine()
const { currentLanguage } =
language && language.currentLanguage
? language
: { currentLanguage: defaultLang }
const api = apiContent[currentLanguage]
const links = [
api.useForm,
api.register,
api.unregister,
api.errors,
api.watch,
api.handleSubmit,
api.reset,
api.setError,
api.clearError,
api.setValue,showBuilder,
toggleBuilder,
HomeRef,
isStatic,
defaultLang,
}: {
showBuilder?: boolean
toggleBuilder?: Function
HomeRef?: any
isStatic?: boolean
defaultLang: string
}) {
const {
state: { formData = [], language },
action: updateFormData,
} = useStateMachine(updateStore)
const { currentLanguage } =
language && language.currentLanguage
? language
: { currentLanguage: defaultLang }
const [editFormData, setFormData] = useState(defaultValue)
const {
register,
handleSubmit,
errors = {},
watch,
setValue,
reset,
} = useForm()
const [editIndex, setEditIndex] = useState(-1)
const copyFormData = useRef([])
const closeButton = useRef(null)export default function Nav({ defaultLang }: { defaultLang: string }) {
const {
action,
state: { language },
} = useStateMachine(updateCurrentLanguage)
const { currentLanguage } =
language && language.currentLanguage
? language
: { currentLanguage: defaultLang }
const location = globalHistory.location
return (
<>
<a title="React Hook Form Github" rel="noopener noreferrer" href="https://github.com/bluebill1049/react-hook-form"></a>api.reset,
api.setError,
api.clearError,
api.setValue,
api.getValues,
api.triggerValidation,
api.formState,
api.formContext,
api.reactNative,
api.validationSchema,
api.NativeValidation,
api.typeScript,
]
const {
state: { language },
} = useStateMachine()
const { currentLanguage } =
language && language.currentLanguage
? language
: { currentLanguage: defaultLang }
const copyFormData = useRef([])
const apiSectionsRef = useRef({
quickStartRef: null,
formStateRef: null,
useFormRef: null,
registerRef: null,
unregisterRef: null,
resetRef: null,
errorsRef: null,
watchRef: null,
setErrorRef: null,
validationSchemaRef: null,function SEO({
title,
description,
location,
}: {
title: string
description?: string
location: { pathname: string }
}) {
const { action } = useStateMachine(updateCurrentLanguage)
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
description
author
languages {
defaultLangKey
langs
}
}
}
}
`export default function Header({
homeRef,
defaultLang,
}: {
homeRef: React.Ref
defaultLang: string
}) {
const [isWeb, setIsWeb] = React.useState(true)
const {
state: { language },
} = useStateMachine()
const { currentLanguage } =
language && language.currentLanguage
? language
: { currentLanguage: defaultLang }
return (little-state-machine
State management made super simple
