One of the key ideas behind Reactive Search and Reactive Maps is the reactive design pattern, which allows defining how a component reacts to changes in the states of the sensors. This allows almost all ReactiveSearch components to watch each other and update their data reactively. For example, a SingleList component can update its data based on the search term in a SearchBox component.
Usage
<search-box
...
:react=`{
"and": "citySensor",
"or": "searchSensor"
}`
>
Props
react Object
react
prop is available in components whose data view should reactively update when on or more dependent components change their states, e.g. ReactiveList
.
- key
String
one ofand
,or
,not
defines the combining clause.- and clause implies that the results will be filtered by matches from all of the associated component states.
- or clause implies that the results will be filtered by matches from at least one of the associated component states.
- not clause implies that the results will be filtered by an inverse match of the associated component states.
- value
String or Array or Object
String
is used for specifying a single component by itscomponentId
.Array
is used for specifying multiple components by theircomponentId
.Object
is used for nesting other key clauses.
An example of a react
clause where all three clauses are used and values are Object
, Array
and String
.
<search-box
...
:react=`{
"and": {
"or": ["CityComp", "TopicComp"],
"not": "BlacklistComp"
}
}`
/>
Here, we are specifying that the UI should update whenever one of the blacklist items is not present and simultaneously any one of city or topics matches.