Nighttime Pachinko Marathon

    @akihirotakamura/formsy-semantic-ui-react
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.1 • Public • Published

    formsy-semantic-ui-react Build Status npm version

    Quicky create formsy-react forms with Semantic-Ui-React's Form Components.

    Installation

    npm install (or yarn add) formsy-semantic-ui-react
    

    You will also need formsy-react

    npm install (or yarn add) formsy-react
    

    Usage

    // ES6
    import {
      Form, Input, TextArea, Checkbox, Radio, RadioGroup, Dropdown, Select,
    } from 'formsy-semantic-ui-react';
    // ES5
    var Form = require('formsy-semantic-ui-react').Form;
    /** and so on for the rest of the Components **/
    const App = (props) => {
      const errorLabel = <Label color="red" pointing/>
    
      return (
        <Form
          onValidSubmit={ props.onValidSubmit }
          loading={ props.isLoading }
        >
          <Form.Input
            name="email"
            label="Email"
            validations="isEmail"
            validationErrors={{ isEmail: 'Email not valid' }}
            errorLabel={ errorLabel }
          />
        </Form>
      )
    }

    Props

    This library defines a couple of (non-required) props for more control over behavior/markup:

    • errorLabel (type: Node default: none)

      Used to Show validation errors next to the inputs. Any children get replaced by getErrorMessage()

      <Checkbox
        errorLabel={ <Label color="red" pointing="left"/> }/>
      />
    • instantValidation (type: bool default: false)

      Whether or not to show validation errors as soon as user starts typing. Only available on Input and Form.Input

      <Input
        instantValidation
      />

    Examples

    Go to the example folder to see more examples of how the components are used. To run the example app:

    npm/yarn install
    npm/yarn run example-app
    

    Then go to localhost:8080

    For more information on building and validating formsy-react forms, take a look at Formsy-React's Dcoumentaion

    Tests

    Tests are done using Mocha, chai, sinon, and enzyme on jsdom. To run the tests,

    npm/yarn install
    npm/yarn run test (or test:watch)
    

    License: MIT

    Install

    npm i @akihirotakamura/formsy-semantic-ui-react

    DownloadsWeekly Downloads

    4

    Version

    0.4.1

    License

    MIT

    Unpacked Size

    103 kB

    Total Files

    44

    Last publish

    Collaborators

    • akihirotakamura