1.0.1 • Published 1 year ago

react-display-control v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

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

Content

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'
#FieldTypeRequiredDefaultExampleNote
1idstring | numbertrue'homePageDc'Id of group
2defaultMode'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.
3initialDisplay{ 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'
#FieldTypeRequiredDefaultExampleNote
1idstring | numbertrue'header'Id of <Item />
2mode'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
1.0.1

1 year ago

1.0.0

1 year ago

0.2.12

1 year ago

0.2.11

1 year ago

0.2.10

1 year ago

0.2.9

1 year ago

0.2.8

1 year ago

0.2.6

1 year ago

0.2.5

1 year ago

0.2.3

1 year ago

0.2.2

1 year ago

0.2.1

1 year ago

0.2.0

1 year ago

0.1.18

1 year ago

0.1.17

1 year ago

0.1.16

1 year ago

0.1.15

1 year ago

0.1.14

1 year ago

0.1.13

1 year ago

0.1.12

1 year ago

0.1.11

1 year ago

0.1.10

1 year ago

0.1.9

1 year ago

0.1.8

1 year ago

0.1.6

1 year ago

0.1.5

1 year ago

0.1.3

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.1.0

1 year ago