const [currentPropertiesView, setCurrentPropertiesView] = usePropertiesView();
return (
<div>
<p>The current properties view is {currentPropertiesView} </p>
<button onClick={() => setCurrentPropertiesView('list')}>
Set properties view to list
</button>
</div>
)
You can also access the view by using searchParams.get in other components, rather than
passing down currentPropertiesView (shown in the example above) as a prop.
const view = searchParams.get('view') || 'grid';
return (
<div className={`${view === 'list'} ? 'list-styles' : 'list-grid'`}>
Property results...
</div>
)
A hook used to set the property view in the url search params for example
/properties/sales?view=list. This allows components like the property results to be updated based on the view that is set.If the defaultView is set the hook removes the view from the search params. For example if the defaultView is 'grid' the
view=gridwill not been shown in the search params.Implementation: