import DynamicFieldBuilder from 'rolling-fields';
 
   const fields = [
      { name: 'green field' },
      { name: 'open field', type: 'password' },
      { type: 'submit', text: 'Submit' },
    ];
 
   <form>
    <DynamicFieldBuilder fields={fields} />
   </form>

  <DynamicFieldBuilder
    fields={} // Array of field objects
    mappings={} // Optional object to define how to render different types of fields
    fieldContext={} // Optional value that will be shared among all fields when using custom mappping
    onBlur={}
    onChange={}
    setFieldValue={} // Use for custom input that does not support HTML SyntheticEvent
  />

  const MyCustomInput = ({ name }) => (
    <input name={name} className="custom"> Something cool! </input>
    )
 
   const fields = [
      { name: 'green field' },
      { name: 'open field', type: 'custom' },
      { name: 'hide', type: 'invisible', },
      { name: 'show' type: 'visible', },
      { type: 'submit', text: 'Just do it!' },
    ];
    
    const mappings = {
      string: ({ name }) => (
        <input name={name} className="string-field" />
      ),
      custom: ({ name }) => (
        <MyCustomComponent name={name} />
      ),
      invisible: ({ name }, fieldContext) => !fieldContext.isVisible && (
        <input name={name} />
      ),
      visible: ({ name }, fieldContext) => fieldContext.isVisible && (
        <input name={name} />
      ),
      submit: ({ name, text }) => (
        <button type="submit" >{text}</button>
      ),
    };
    
  <form>
    <DynamicFieldBuilder
        fields={fields}
        mappings={mappings}
        fieldContext={{ isVisible: true }}
        />
  </form>