How to use formula-one - 6 common examples

To help you get started, we’ve selected a few formula-one 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 flexport / formula-one / example / src / App.tsx View on Github external
const App = () => {
  const formData = useF1(initialForm);
  const [addFriend, removeFriend] = arrayUtils(formData.friends, '');

  console.log(formData);

  return (
    <form>
      
      
      
      

      <section>
        {formData.friends.map((friend, i) =&gt; (
          <div>
            
            <button> {removeFriend(i)}}&gt;Remove Friend</button>
          </div></section></form>
github flexport / formula-one / example / src / App.tsx View on Github external
const App = () =&gt; {
  const formData = useF1(initialForm);
  const [addFriend, removeFriend] = arrayUtils(formData.friends, '');

  console.log(formData);

  return (
    <form>
      
      
      
      

      <section>
        {formData.friends.map((friend, i) =&gt; (
          <div>
            
            <button> {removeFriend(i)}}&gt;Remove Friend</button></div></section></form>
github flexport / formula-one / example / src / F1ErrorBox.tsx View on Github external
const F1ErrorBox = ({link}: Props) =&gt; {
  const {childErrors} = useLink(link);
  const errors = childErrors();

  return (
    <div>
      Form Errors:
      <ul>
        {errors.length ?
          errors.map(error =&gt; (
            <li style="{{color:">{error}</li>
          ))
          : <li>no errors!</li>
        }
      </ul>
    </div>
  );
};
github flexport / formula-one / example / src / F1TextInput.tsx View on Github external
const F1TextInput = ({link, validator, label}: Props) =&gt; {
  const {value, onChange, errors} = useLink(link, validator);

  return (
    <div>
      <h3>{label}</h3>
      
      <p style="{{color:">{errors.join(' ')}</p>
    </div>
  );
};
github flexport / formula-one / example / src / F1SubmitButton.tsx View on Github external
const F1SubmitButton = ({link, onClick, children}: Props) =&gt; {
  const {value} = useLink(link);

  const handleClick = () =&gt; {
    onClick &amp;&amp; onClick(value);
  }

  return(
    <button type="submit">
      {children}
    </button>
  );
}
github flexport / formula-one / example / src / App.tsx View on Github external
<section>
        {formData.friends.map((friend, i) =&gt; (
          <div>
            
            <button> {removeFriend(i)}}&gt;Remove Friend</button>
          </div>
        ))}
      </section>

      <button>Add Friend</button>

      Submit

      {JSON.stringify(peekValue(formData))}
    
  );
};

formula-one

Strongly-typed React form state management

MIT
Latest version published 2 years ago

Package Health Score

54 / 100
Full package analysis