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.

github react-hook-form / react-hook-form-website / src / components / HomePage.tsx View on Github external
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)
github react-hook-form / react-hook-form-website / src / components / CodeArea.tsx View on Github external
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 &amp;&amp; (
         {
            copyClipBoard(rawData || generateCode(data))
            alert(generic.copied[currentLanguage])
          }}</section>
github react-hook-form / react-hook-form-website / src / components / Form.tsx View on Github external
formUpdated: boolean
  currentLanguage: string
}) {
  const {
    register,
    errors,
    handleSubmit,
    watch,
    formState: { touched },
    reset,
  } = useForm({
    mode: "onChange",
  })
  const {
    state: { formData },
  } = useStateMachine()

  return (
    &lt;&gt;
      
        <h1>{home.liveDemo[currentLanguage].title}</h1>
        {formUpdated &amp;&amp; (
           (
              <p style="{{">
                Note: your form have been updated.
              </p>
            )}
github react-hook-form / react-hook-form-website / src / components / AdvancedPage.tsx View on Github external
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,
github react-hook-form / react-hook-form-website / src / components / ApiPage.tsx View on Github external
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,
github react-hook-form / react-hook-form-website / src / components / BuilderPage.tsx View on Github external
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)
github react-hook-form / react-hook-form-website / src / components / Nav.tsx View on Github external
export default function Nav({ defaultLang }: { defaultLang: string }) {
  const {
    action,
    state: { language },
  } = useStateMachine(updateCurrentLanguage)
  const { currentLanguage } =
    language &amp;&amp; language.currentLanguage
      ? language
      : { currentLanguage: defaultLang }
  const location = globalHistory.location

  return (
    &lt;&gt;
      
        
          <a title="React Hook Form Github" rel="noopener noreferrer" href="https://github.com/bluebill1049/react-hook-form"></a>
github react-hook-form / react-hook-form-website / src / components / ApiPage.tsx View on Github external
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,
github react-hook-form / react-hook-form-website / src / components / seo.tsx View on Github external
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
            }
          }
        }
      }
    `
github react-hook-form / react-hook-form-website / src / components / Header.tsx View on Github external
export default function Header({
  homeRef,
  defaultLang,
}: {
  homeRef: React.Ref
  defaultLang: string
}) {
  const [isWeb, setIsWeb] = React.useState(true)
  const {
    state: { language },
  } = useStateMachine()
  const { currentLanguage } =
    language &amp;&amp; language.currentLanguage
      ? language
      : { currentLanguage: defaultLang }

  return (

little-state-machine

State management made super simple

MIT
Latest version published 2 years ago

Package Health Score

56 / 100
Full package analysis

Popular little-state-machine functions