@bendcircular/conditional-components-react v0.0.18

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

License

MIT © bendcircular GmbH