https://github.com/k1r0s/preact-bind-group

Preact Component to Group Form fields onChange Events to a single Callback
https://github.com/k1r0s/preact-bind-group

preact preact-components preact-forms

Last synced: about 2 months ago
JSON representation

Preact Component to Group Form fields onChange Events to a single Callback

• Host: GitHub
• URL: https://github.com/k1r0s/preact-bind-group
• Owner: k1r0s
• License: mit
• Created: 2018-02-09T10:19:43.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-10-02T09:36:40.000Z (about 6 years ago)
• Last Synced: 2024-10-13T02:13:41.268Z (2 months ago)
• Topics: preact, preact-components, preact-forms
• Language: JavaScript
• Homepage: https://npm.im/preact-bind-group
• Size: 45.9 KB
• Stars: 26
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## preact-bind-group

[![downloads](https://img.shields.io/npm/dm/preact-bind-group.svg)](https://www.npmjs.com/package/preact-bind-group)

[![version](https://img.shields.io/npm/v/preact-bind-group.svg)](https://www.npmjs.com/package/preact-bind-group/)

[![dependencies](https://david-dm.org/k1r0s/preact-bind-group/status.svg)](https://david-dm.org/k1r0s/preact-bind-group/status.svg)

[![dev-dependencies](https://david-dm.org/k1r0s/preact-bind-group/dev-status.svg)](https://www.npmjs.com/package/preact-bind-group)

An event wrapper for preact and react to centralize and simplify events management and state binding.

[![Edit preact-bind-group example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/6v861168y3)

breaking changes since version 2.*

- React is now supported. Just import from "preact-bind-group/react"

- `BindGroup` component has been renamed to `FormGroup`

### Why

React/Preact forms are a bit cryptic because it leads developer to deal with too many language primitives to tie state with fields, care about events and duplicate this pattern for each field.

### How

preact-bind-group exposes a `` component that looks for children that contain `data-bind` attribute which should be assigned to any element or component that emits an `onChange` event.

### Get started

Install it:

```bash

npm install preact-bind-group

```

Import it it in your components and use it:

```jsx

import { render } from "preact";

import { FormGroup } from "preact-bind-group";

const App = () => (

  


    
FormGroup demo

     console.log(change)}>

      

        Name: 

      

      


      

        Age: 

      

    

  

);

```


### Watch callback

The `watch` callback receives an `{key: value}` object containing the changed property as its parameter.

```

 {name: "asdas"}

```

Then you can update your state easily:

```jsx

   this.setState({ ...change })}>

```

If the input element is of type _checkbox_ or _radio_, then it'll receive the checked html property as its value.

For convenience, you'll get a second argument with the field key. The callback signature is _({ [key: string]: any }, key: string) => void_.

### Custom events

You can change the event that `FormGroup` should listen to:

```javascript

  

```

> Note: keep in mind that `onInput` in Preact === `onChange` in React, and `onChange` in Preact === `onBlur` on React.

#### Preload form with data

You should use `preload` attr to fill form fields with default data

```javascript



  
FormGroup demo

   console.log(change)} preload={userModel}>

    


      

    

    


      

    

    


      

      

      

    

    


      

    

  



```