@simpozio/contact-form
v1.0.1
Published
Package for Contact Form component
Downloads
8
Readme
Contact Form
Package for Contact Form component.
Contains generic Form
component and presets: Short
Installation
npm i @simpozio/contact-form
Usage
You can use generic component Form
and construct your own view for it:
import {Form, Field} from '@simpozio/contact-form';
const Component = () => {
const initialValues = {
name: ''
}
const onChange = () => Promise.resolve(console.log('Form Updated'));
const onValidate = ({fields}) => {
return Promise.resolve(_.mapValues(fields, value => (value => !!value));
}
const onValid = ({fields}) => console.log('Form is valid!', fields);
const onSubmit = ({values, resetForm}) => {
return new Promise((resolve, reject) => {
try {
api.post(values)
.then(resolve)
.then(() => {
resetForm()
})
} catch(e) {
reject(e);
};
}
}
const onError = ({error, resetForm}) => {
console.log(error);
resetForm();
};
return (
<Form
initialValues={initialValues}
onChange={onChange}
onValid={onValid}
onValidate={onValidate}
onSubmit={onSubmit}
onError={onError}
>
{({
fields,
formError,
onChange,
isValid,
isSubmitting,
updateForm,
submitForm,
resetForm
}) => (
<Field
label="name"
name="name"
field={fields["name"]}
onChange={onChange}
onBlur={updateForm}
/>
{formError && <p>{formError}</p>}
<button onClick={submitForm} disabled={!isValid || isSubmitting}>Submit</button>
<button onClick={resetForm}>Reset</button>
)}
</Form>
)
}
Or you can you preset with predefined structure, e.g. Short
:
import {ShortForm} from '.@simpozio/contact-form/dist/presets';
const StyledShortForm = styled(ShortForm)`
min-height: 750px;
@media (max-width: 767px) {
min-height: 580px;
}
`;
const Component = () => {
const fields = {
name: {
label: 'Your name',
initialValue: ''
},
phone: {
label: 'Your phone',
initialValue: ''
},
email: {
label: 'Your email',
initialValue: ''
}
};
const onChange = () => Promise.resolve(console.log('Form Updated'));
const onValidate = ({fields}) => {
return Promise.resolve(_.mapValues(fields, value => (value => !!value));
}
const onValid = ({fields}) => console.log('Form is valid!', fields);
const onSubmit = ({values, resetForm}) => {
return new Promise((resolve, reject) => {
try {
api.post(values)
.then(resolve)
.then(() => {
resetForm()
})
} catch(e) {
reject(e);
};
}
}
const onError = ({error, resetForm}) => {
console.log(error);
resetForm();
};
return (
<StyledShortForm
formText={'The price for this model starts at £300,000'}
bottomText={
'We collect your data to keep you updated about our reservation program. By submitting this form you agree to the Privacy Policy.'
}
fields={fields}
onValidate={onValidate}
onChange={onChange}
onSubmit={onSubmit}
onError={onError}
/>
);
};
Styling
Form component is generic, so it don't have any styles. So you need to add styles by yourself with css or with styled component. Preset have default styles, and you can style them in 3 ways:
Theming
Preset accepts theme
props, so you can pass theme from your styled-components theme context to preset component:
import {useContext} from 'react';
import styled, {ThemeContext} from 'styled-components';
import {ShortForm} from '@simpozio/contact-form/dist/presets';
const Component = (props) => {
const theme = useContext(ThemeContext);
return (
<ShortForm {...props} theme={theme} />
)
}
Styled Components
Default styling with styled components
import styled from 'styled-components';
import {ShortForm} from '@simpozio/contact-form/dist/presets';
const StyledForm = styled(ShortForm)`
color: #fff;
backgroung-color: #000;
`
const Component = (props) => {
return (
<StyledForm {...props} />
)
}
Custom Styles
Preset supports styles with interpolated string from styled-components:
import styled, {css} from 'styled-components';
import {ShortForm} from '@simpozio/contact-form/dist/presets';
const customStyles = css(({Field, BottomText}) => css`
${Field} {
color: #fff;
backgroung-color: #000;
}
${BottomText} {
font-size: 0.8rem;
}
`
const Component = (props) => {
return (
<StyledForm {...props} styles={customStyles} />
)
}
Properties
Form
Form accepts standard HTML attributes as props: action
, method
, className
.
And form have it's own additional properties:
fields, isSubmitted, isValid: boolean, error, resetForm
initialValues: {[key: string]: string}
- object with default values for fieldsonChange: ({fields, isSubmitted, isValid}) => Promise<newFields>
- callback called when form was updated viaupdateForm()
method. It accepts object with fields and it's values, and optionally can return fields with new values. It can be used to modify fields values in dependency of other values of form changes.onValidate: ({fields, isSubmitted, isValid}) => Promise<object>
- callback called when form was validated. It accepts object with fields and it's values, and should return fields with boolean values (valid/not valid).onValid: ({fields, isSubmitted, isValid}) => void
- callback called when form become valid, afteronValidate()
checkonSubmit: ({fields, isSubmitted, isValid, resetForm}) => Promise<void>
- callback called when form is submitting viasubmitForm()
method. It accepts object with fields and it's values, and optionally can return error that will be passed toonError
callback. Also acceptsresetForm()
method as second argument.onError: ({fields, isSubmitted, isValid, error, resetForm}) => void
- callback called when form is errored (afteronSubmit
callback). It accepts error string passed formonSubmit
callback as first argument, andresetForm()
method as second argument.
Form accepts children as function, and will pass methods and state to this function:
fields
- object with field name as keys, and object withvalue
, fielderror
andtouched
properties as value.value: string
- field valueerror: boolean
- validation state of fieldtouched: boolean
- becomestrue
when value of field is different from the initial
formError: string
- string with for error passed fromonSubmit
callbackonChange: (name, value) => void
- onchange handler for fields, should be passed to onChange callback of fieldsisValid: boolean
- becomestrue
when all fields are valid afteronValidate
callback,isSubmitted: boolean
- prop that shows submitted state of formisSubmitting: boolean
- props that show is submitting in processupdateForm: () => void
- method for call form onChange callback (e.g. for saving values to redux)submitForm: () => void
- method for submitting form, will callonSubmit
callbackresetForm: () => void
- method for resetting form toinitialValues
Field
Fields accepts props passed to MUI Text Field: className
, name
, type
, label
, placeholder
, required
, disabled
.
field: {value: string, error: boolean, touched: boolean}
- field object, containsvalue
, validation state inerror
prop, andtouched
state if vields value is different from initial valueonChange: (name, value) => void
- accepts onChange handler passed from formonBlur: (event) => void
- accepts onBlur handler, it can be used to update form viaupdateForm()
method
Caption
Component for form text, that accepts HTML string and render it as children.
className: string
- standard prop for stylinghtml: string
- you can pass HTML string that will be inserted as children viadangerouslySetInnerHTML
prop. If passed -children
props will be ignored.children
- standard children prop to render child components. It will be ignored ifhtml
prop is passed.
<Caption html="<span>This text will be rendered as <b>html</b></span>">
This text will be ignored!
</Caption>
<Caption>
<span>This text will be rendered as regular <b>children</b></span>
</Caption>
Presets
Short
Form component with predefined structure.
Properties
It accepts all properties from Form
component, except initialValues
, and has its own properties:
fields: object
- fields preset objectlabel: string
- field labelplaceholder: string
- field placeholderinitialValue: string
- field initial valuedisabled: string
- disabled state of field
formText: string
- HTML string passed toCaption
component above the buttonbottomText: string
- HTML string passed toCaption
component at the bottom of the formvalidSchema: yup-schema
- validation schema created viayup
modulestyles: string
- interpolated styled components string with stylestheme: object
- theme object