Quicksnack NPM | npm.io

3.53.0 • Published 1 year ago

Install

Weekly downloads

274

License

MIT

Repository

Last release

1 year ago

Quicksnack

Quickly create beautiful admin layouts.

All components and layouts

Please have a look at our storybook

Responsive form

Quickly render a form responsively in all modern browsers (including IE11) using a fully type-safe datastructure.
You can use the data-structure to easily build tests around, e.g. auto fill forms using faked data.

const scaffoldProps = new FormPositioner({
  firstName: {
    type: "TextField",
    props: {
      label: "First name",
    }
  },
  prefix: {
    type: "TextField",
    props: {
      label: "Last name",
      hint: "Integer posuere erat a ante venenatis dapibus posuere velit aliquet.",
    }
  },
  lastName: {
    type: "TextField",
    props: {
      label: "Last name",
      hint: "Donec sed odio dui.",
      error: "Something went wrong!",
    }
  },
  avatar: {
    type: "FileField",
    props: {
      label: "Avatar",
      placeholder: "Please choose a file"
    }
  },
  description: {
    type: "TextField",
    props: {
      label: "Description",
      multiline: true
    }
  },
  toppings: {
    type: "Checkbox",
    props: {
      label: "Toppings",
      error: "Something went wrong!",
      options: {
        tomato: "Tomato sauce",
        cheese: "Cheese",
        pineapple: "Pineapple",
        pepperoni: "Pepperoni",
      }
    }
  },
  crust: {
    type: "Select",
    props: {
      label: "Crust",
      options: {
        plain: "Plain",
        wholeWheat: "Whole wheat",
        cheese: "Cheese",
      }
    }
  },
  terms: {
    type: "Checkbox",
    props: {
      options: { agree: "I agree to the terms of usage" }
    }
  },
  submit: {
    type: "Button",
    props: {
      children: "Submit",
      variant: "primary"
    }
  }
})
  
  // Renders all fields horizontally on mobile: 
  .setHorizontal('mobile')
  
  // Renders fields in a grid on tablets and bigger 
  .setGrid('tablet', '1fr 1fr', [
    ['firstName',   'lastName'],
    ['description', 'avatar'],
    ['description', 'prefix'],
    ['description', 'toppings'],
    ['description', 'crust'],
    ['terms',       'terms'],
    ['submit']
  ])
  
  .getScaffoldProps()


const MyForm:React.FC = () => <ScaffoldForm {...scaffoldProps} />

Please have a look at the rendered example

clsx lodash.chunk lodash.difference

@everything-registry/sub-chunk-2515

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago