# XlReactWidgetFilter

Component that helps with creation of string filter.

### Summary

* [Exports](#exports)
* [Playground](#playground)
* [Properties](#properties)
* [Example](#example)

### Exports
```
- XlReactWidgetFilter
- XlReactWidgetFilterComponent
```

### Playground
* [Filter Widget](https://xebialabs.github.io/xl-react-components/kitchen-sink.html#/widget/widgetFilter1)

### Properties
- **metadata** - object - object containing additional component metadata:
    - label - string - input field label
    - placeholder - string - input field placeholder
- **model** - string - value of the input field
- **onUpdate** - function(string) - function called on input change. It accepts one string argument which represents new input field value. 

### Example
```js
import React, {useState} from 'react';
import {XlReactWidgetFilter} from 'xl-react-components';

export const FilterComponent = () => {
    const [filter, setFilter] = useState('');
    return <XlReactWidgetFilter
        metadata={{label: 'Filter by username', placeholder: 'Enter username'}}
        model={filter}
        onUpdate={setFilter}
    />;
};
```
