0.0.2 • Published 5 years ago
@mazecx/semantic-ui-react-formik v0.0.2
semantic-ui-react-formik
Formik components using Semantic UI as presentation UI
Install
npm install --save semantic-ui-react-formik
# or
yarn add semantic-ui-react-formikUsage
This package expose the Form components of the semantic-ui-react package wrapped with the Formik components.
List of components:
| Component | Description | Reference |
|---|---|---|
| Form | Sugar for | https://jaredpalmer.com/formik/docs/api/formik |
| Form.Button | Sugar for <Form.Field control={Button} /> | https://react.semantic-ui.com/elements/button/ |
| Form.Checkbox | Sugar for <Form.Field control={Checkbox} /> | https://react.semantic-ui.com/modules/checkbox/ |
| Form.Dropdown | Sugar for <Form.Field control={Dropdown} /> | https://react.semantic-ui.com/modules/dropdown/ |
| Form.Group | A set of fields can appear grouped together | https://react.semantic-ui.com/collections/form/ |
| Form.Input | Sugar for <Form.Field control={Input} /> | https://react.semantic-ui.com/collections/form/ |
| Form.Radio | Sugar for <Form.Field control={Radio} /> | https://react.semantic-ui.com/collections/form/ |
| Form.Select | Sugar for <Form.Field control={Select} /> | https://react.semantic-ui.com/collections/form/ |
| Form.TextArea | Sugar for <Form.Field control={TextArea} /> | https://react.semantic-ui.com/collections/form/ |
Example
import React, {Component} from 'react'
import Form from 'semantic-ui-react-formik'
// or
// import Form, {Checkbox, Input, Radio ...} from 'semantic-ui-react-formik'
class Example extends Component {
render() {
return (
<Form initialValues={{}} onSubmit={() => {}}>
{({isSubmitting}) => (
<>
<Form.Input
label="Email"
name="email"
type="email"
placeholder="someemail@email.com"
/>
<Form.Group widths="equal">
<Form.Checkbox
label="I like apples"
name="preference"
value="apple"
/>
<Form.Checkbox
label="and also bananas."
name="preference"
value="banana"
/>
<Form.Button loading={isSubmitting} type="submit">
Submit
</Form.Button>
</Form.Group>
</>
)}
</Form>
)
}
}License
MIT © wladiston