kettanaito / react-advanced-form-addons Goto Github PK

Form prototyping framework for React Advanced Form. Tailor production-ready forms in a matter of minutes. Write the logic, do the styles later.

License: MIT License

JavaScript 100.00%

react react-form react-advanced-form raf react-advanced-form-addons raf-addons prototyping form-prototyping prototype tools

react-advanced-form-addons's Introduction

React Advanced Form Addons

A collection of tools dedicated for fast form prototyping using React Advanced Form.

Components

Fields

Input
Radio
Checkbox
Select
Textarea

Other

Label
Button

Getting started

Install

NPM:

npm install react-advanced-form-addons --save

Yarn:

yarn install react-advanced-form-addons

Note: You would need to have react-advanced-form installed as a peer dependency in order to use this package.

Prototype!

import React from 'react';
import { Form } from 'react-advanced-form';
import { Input, Select } from 'react-advanced-form-addons';

export default class Example extends React.Component {
  render() {
    return (
      <Form>
        <Input
          name="username"
          required />
        <Select
          name="role"
          required>
          <option value="admin">Administrator</option>
          <option value="editor">Editor</option>
        </Select>
      </Form>
    );
  }
}

License

This project is issued under MIT License.

react-advanced-form-addons's People

Contributors

Stargazers

Watchers

Forkers

bertrandbuild schinjak aazcast

react-advanced-form-addons's Issues

Textarea is not working

The Field Textarea is not working properly.
The code:
import { Input, Button, Select, Textarea } from 'react-advanced-form-addons';
<Col lg={4}>
<Input name="name" type="text" label="Nombre" required />
</Col>
<Col lg={4}>
<Textarea name="description" label="Descripcion" required />
</Col>

The result:

fix warning : 'Received `false` for a non-boolean attribute `display`' on ValidationStatus of Input component

Thx for the amazing job 👍

Yet I had issues when trying to use the lib. The basic Input Component works well but display an important warning : Received 'false' for a non-boolean attribute 'display'.

To avoid it I simply replaced display={ valid || invalid } on line 128 of Input.jsx by : display='flex'

I also encountered similar issues with <Field.Group> which totally block the render of storybook.

Error in the yarn installation docs

Feel the trick when you install the package using yarn via npm :)

Inject custom css style to Input component

I am trying to build a registration Form using Input component from react-advanced-form-addons.

Can able to build fundamental registration page with all the required validation.

But finally stuck with Injecting custom css/style to Input component (bold and font color), since it involve styled component which create style dynamically, unable to set my own style in the production mode, ie NODE_ENV='production', ex. display:block, but which works fine in NODE_ENV='development'.

And also since it generates

tag for validation error, don't have freedom to set/apply my won style.

Please let me know how to add custom css/styles to or

components.

If there is no solution I have move to other solution. help me out to resolve the issue.

checkbox checked

Setting the checked attribute for checkbox works for initial state but attempting to alter it during the form for example with a select all checkbox that selects all the boxes and disables them (and vice versa for unchecking the box) won't comply unless using .click() on each element. Is there some way to customize the element to enable setting checked= from the props this from happening?

Update to "[email protected]"

Self-descriptive.