@lefapps/forms-pages

Page Components

This is an extension package for @lefapps/forms.

Install

npm install @lefapps/forms-pages --save

Usage

import { EasyForm } from '@lefapps/forms'
import { Components, Decorators } from '@lefapps/forms-pages'

const MyForm = new EasyForm()

// Use all provided extensions
Object.keys(Components).forEach(component =>
  MyForm.addComponent(component, Components[component]))
Object.keys(Decorators).forEach(decorator =>
  MyForm.addDecorator(decorator, Decorators[decorator]))

// OR use some
['markdown'].forEach(component =>
  MyForm.addComponent(component, Components[component]))

const Form = MyForm.instance()
Form.displayName = 'EasyForm'

const FormEditor = MyForm.editor()
FormEditor.displayName = 'EasyFormEditor'

export default Form
export { Form, FormEditor }

You can the use the <Form> component as described in @lefapps/forms.

Extensions

name	type	description
buttons	component	Inserts submit and other buttons
markdown	component	Display MarkDown content
tangential	component	Display Aside content
video	component	Full width video
question	component	Predefined question types
columns	decorator	simplification of default layout decorator
name	decorator	add name field to elements

Buttons

Renders buttons inline.

const config = {
  type: 'buttons',
  types: ['reset', 'cancel', 'submit']
}

Note: when using the type submit , you can use the onSubmit handler on the <Form> component which returns the model.

MarkDown

Renders a markdown string provided by content .

const config = {
  type: 'markdown',
  content: '### Title\n\nI am paragraph with a [link](#title).\n\n>Hello World!'
}

Tangential

Renders a markdown string provided by content inside a aside element with an optional marker symbol.

Note: the marker is attached as a data-marker attribute to the aside element to give you plenty of room to position it using pseudo-elements.

const config = {
  type: 'tangential',
  marker: '', // any symbol, rendered as text, e.g. "?" or "i"
  content: 'Want to know more about forms? Checkout [npm](https://www.npmjs.com/package/@lefapps/forms).'
}

Video

Renders an embedded video using the full available width.

const config = {
  type: 'video',
  url: 'youtube or vimeo URL'
}

Question

Renders an input field defined by questionType .

const configOpen = {
  name: 'modelKey',
  type: 'question',
  questionType: 'open'
}

const configMC = {
  name: 'modelKey',
  type: 'question',
  questionType: 'radio',
  label: 'Question?',
  options: ['Answer 1', 'Answer 2', 'Answer 3']
  options: [
    { _id: 'answer-1', default: 'Answer 1', score: 1 },
    { _id: 'answer-2', default: 'Answer 2', score: 0 },
    { _id: 'answer-3', default: 'Answer 3', score: 0 }
  ]
}

questionType	required fields	optional fields	result
bool			Radio input with Yes and No
open		md attributes.rows	Textarea, with optional markdown editor
number		attributes.min attributes.max attributes.step	input
mc	options		Multiple answers, multiple selectable
radio	options		Multiple answers, one selectable

Columns

Note: we advise to remove the default layout decorators before using this one to avoid layout conflicts.

MyForm.removeDecorator('layout')

Name

Updates the default name decorator with modified label and added help text.