quicksnack
v3.53.0
Published
Quickly create beautiful admin layouts using react
Downloads
193
Readme
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} />