@bendcircular/conditional-components-react
v0.0.18
Published
Helper methods and components to render elements based on configurable conditions
Downloads
68
Readme
conditional-components-react
Helper methods and components to render elements based on configurable conditions
Install
npm install --save @bendcircular/conditional-components-react
# or
yarn add @bendcircular/conditional-components-react
Usage
import * as React from 'react'
import {
DEFAULT_LOCAL_STORAGE_KEY,
ConditionalComponent,
useLocalStorageConfig,
useLocalStorageCondition
} from 'conditional-components-react'
const FEATURE = 'myFeature'
const App = () => {
const { conditions, setConfig } = useLocalStorageConfig({
storageKey: DEFAULT_LOCAL_STORAGE_KEY
})
const isActive = useLocalStorageCondition({
condition: FEATURE,
additionals: {}
})
const toggleActivation = React.useCallback(() => {
setConfig({ ...conditions, [FEATURE]: !isActive })
}, [conditions, isActive, setConfig])
return (
<div>
<div>App</div>
<button onClick={toggleActivation}>
{isActive ? 'deactivate' : 'activate'}
</button>
<ConditionalComponent condition={FEATURE} config={{ myFeature: false }}>
<div>This is my conditional component</div>
</ConditionalComponent>
</div>
)
}
export default App