Introduction

This react component will help you render or show or hide your components by some conditions as easy as good

Features:

• Show/Hide components/elements from any where
  • For example 1: you are staying at <Footer> component and wanna hide some items at <Header />
  • For example 2: you are rendering a list items, and wanna show some items, hide some others
  • For example 3: you are render many components and wanna show/hide some one by your condition
• Multiple display control
  • You can create many control by wrap <Item /> inside a <Group />, then use useDisplayControl to control (show/hide) all <Item />
• Nesting display control
  • <Group /> can be nesting

Notice:

• Don't forget wrap your app with <DisplayControlProvider />, let's implement it in src/App.tsx or src/index.tsx
  • Regarding nextjs, you can implement <DisplayControlProvider /> in pages/_app.tsx
• Use <SingleItem /> if you only wanna control a single element/component
• User <Group /> and <Item /> if you wanna control many <Item /> inside a <Group />
• useDisplayControl:
  • You can check display state of some <Group /> or <SingleItem />
  • You can excute some methods like setDisplay, displayAll, hideAll
  • For more detail please read API

Install

Via Npm:

npm i -s react-display-control

Via Yarn:

yarn add react-display-control

Demo, sample

• See the demo + sample code here

Content

• Introduction
  • Install
  • Demo, sample
  • Content
  • Usuage
    • Import Display Control Provider to App.tsx
    • Show/hide for single item <SingleItem />
    • Basic show/hide some components or some elements in a <Group />
    • Init a default display state for <Group />
    • Init default display mode for <Group />
    • Multiple display control (create many <Group />)
    • Nesting display control
  • API
    • Root provider (<DisplayControlProvider />)
    • Display control for single item <SingleItem />
    • Display control group (<Group />) props
    • Display control item (<Item />) props
    • Get current display state of a <Group />, and excute some methods to show/hide <Item />

Usuage

Import Display Control Provider to App.tsx

File: src/App.tsx

import { DisplayControlProvider } from 'react-display-control'

export const App = () => {
  return (
    <SomeReduxOrSomethingsProvider>
      <DisplayControlProvider>
        // ... your app content here
        <div>...</div>
        <div>... </div>
      </DisplayControlProvider>
    </SomeReduxOrSomethingsProvider>
  )
}

Show/hide for single item <SingleItem />

<SingleItem /> is an alias of <DisplayControlSingleItem />

Example code + preview: Show/hide for single item <SingleItem />

Basic show/hide some components or some elements in a <Group />

Example code + preview: Basic show/hide components/elements

Default: show all <Item /> if you don't pass initialDisplay props

Init a default display state for <Group />

Some components/elements will be showed or be hidden by default if you provide initialDisplay props to <Group />

Example props:

initialDisplay={{
  header: true, // show 'header' by default
  body: false   // hide 'body' by default
}}

It mean that: by default, header + footer will be show, body will be hidden. (If you don't pass some <Item /> id, or missing some <Item /> id that <Item /> id will be show by default, like footer in this case)

That props initialDisplay above is equivalent to

initialDisplay={{
  header: true,
  body: false,
  footer: true // we did not pass the 'footer' above, and it mean `footer = true`
}}

Example code + preview: init default show/hide state of some components/elements

Init default display mode for <Group />

Example code + preview: init default display mode ('render' or 'css')

These code bellow mean: Default mode for all <Item /> is render, except body is css

Different between render and css:

• If current <Item /> mode is render, and it be not show to screen, it will not be rendered. This mode useful if you don't want render the <Item /> as HTML code
• If current <Item /> mode is css, and it be not show to screen, it will be added a css style (display: none) to hide itself. This mode is useful if you still wanna render <Item /> as HTML code, and when it need to hide, we just add display: none

Multiple display control (create many <Group />)

Example code + preview: multiple display control (create many <Group />)

Nesting display control

Example code + preview: nesting display control (Nesting <Group />)

API

Root provider (<DisplayControlProvider />)

This component don't receive any props Importance: you should render this component only one time, and should render <DisplayControlProvider /> in root file (such as src/App.tsx or src/index.tsx)

import { DisplayControlProvider } from 'react-display-control'

export const App = () => {
  return (
    <SomeReduxOrSomethingsProvider>
      <DisplayControlProvider>
        // ... your app content here
        <div>...</div>
        <div>... </div>
      </DisplayControlProvider>
    </SomeReduxOrSomethingsProvider>
  )
}

Display control for single item <SingleItem />

<SingleItem /> is an alias of <DisplayControlSingleItem />

import {
  SingleItem,
  useDisplayControl,
  UseDisplayControlValue
} from 'react-display-control'
// Or
/*
import {
  DisplayControlSingleItem,
  useDisplayControl,
  UseDisplayControlValue
} from 'react-display-control'
*/

const Home = () => {
  const mySingleItemDc: UseDisplayControlValue =
    useDisplayControl('mySingleItemDc')

  return (
    <div>
      <button onClick={() => mySingleItemDc?.setDisplay(true)}>Show</button>
      <button onClick={() => mySingleItemDc?.setDisplay(false)}>Hide</button>

      <SingleItem id="mySingleItemDc" mode="render" initialDisplay={true}>
        <p>My content inside</p>
      </SingleItem>
    </div>
  )
}

Props: | # | Field | Type | Required | Default | Example | Note | |---|----------------|-------------------|----------|----------|--------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 | id | string | number | true | | 'mySingleDc' | Id of | | 2 | mode | 'render' | 'css' | false | 'render' | 'css' | render mode: If need to hide, it will be not rendered as HTML code. will be rendered as undefined css mode: If need to hide, it will be has display: none css style attributes. | | 3 | initialDisplay | boolean | false | true | true | Show or hide at the first time render |

Display control group (<Group />) props

<Group /> is an alias of <DisplayControlGroup />

import { Group } from 'react-display-control'
// Or
import { DisplayControlGroup } from 'react-display-control'

| # | Field | Type | Required | Default | Example | Note | | --- | -------------- | ----------------------------------- | -------- | -------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 1 | id | string | number | true | | 'homePageDc' | Id of group | | 2 | defaultMode | 'render' | 'css' | false | 'render' | 'css' | render mode: If need to hide, it will be not rendered as HTML code. will be rendered as undefinedcss mode: If need to hide, it will be has display: none css style attributes. | | 3 | initialDisplay | { [id: string | number]: boolean } | false | {} | { header: true, body: false } | Set default display state. If some <Item /> id is not listed to initialDisplay, It will be have true value. The next to example is equivalent to: { header: true, body: false, footer: true } |

Display control item (<Item />) props

<Item /> is an alias of <DisplayControlItem />

import { Item } from 'react-display-control'
// Or
import { DisplayControlItem } from 'react-display-control'

| # | Field | Type | Required | Default | Example | Note | | --- | ----- | ----------------- | -------- | -------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 1 | id | string | number | true | | 'header' | Id of <Item /> | | 2 | mode | 'render' | 'css' | false | 'render' | 'css' | - render mode: If need to hide, it will be not rendered as HTML code. will be rendered as undefined - css mode: If need to hide, it will be has display: none css style attributes. - If you don't pass mode to <Item /> as a props. It will get the default mode (defaultMode) from <Group /> and treat it as itself mode |

Get current display state of a <Group />, and excute some methods to show/hide <Item />

Hooks name: useDisplayControl

import {
  useDisplayControl,
  UseDisplayControlValue
} from 'react-display-control'

const MyComponent = () => {
  const myDc: UseDisplayControlValue = useDisplayControl('myGroupId')

  return <div>My component</div>
}

Usuage:

// Get control hooks (you can implement this hooks bellow in any components that you want to control display of a <Group />)
const homePageDc: UseDisplayControlValue = useDisplayControl('homePageDc') // 'homePageDc' is 'id' of <Group />

Or

// Get control hooks (you can implement this hooks bellow in any components that you want to control display of a <Group />)
const { state, setDisplay, displayAll, hideAll }: UseDisplayControlValue =
  useDisplayControl('homePageDc') // 'homePageDc' is 'id' of <Group />

• UseDisplayControlValue:

  • Description: return value type of useDisplayControl
  • Type:
    • state: { [itemId: string | number]: boolean }
    • setDisplay: (displayConfig: { [itemId: string | number]: boolean } | boolean) => void
      • If displayConfig === true (boolean), it is equivalent to display all
      • If displayConfig === false (boolean), it is equivalent to hide all
    • displayAll: () => void
    • hideAll: () => void
  • Meaning:
    • state: all display state infomation of <Item /> inside a <Group />
    • setDisplay: set show/hide some <Item />
      • Example 1: setDisplay({ header: true, body: false })
      • Example 2: setDisplay(true) (show all)
      • Example 3: setDisplay(false) (hide all)
    • displayAll: show all <Item /> inside a <Group />
    • hideAll: hide all <Item /> inside a <Group />

• useDisplayControl:

  • Type: (groupId: string | number) => UseDisplayControlValue