react-display-control v1.0.1
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
- For example 1: you are staying at
- Multiple display control
- You can create many control by wrap
<Item />
inside a<Group />
, then useuseDisplayControl
to control (show/hide) all<Item />
- You can create many control by wrap
- Nesting display control
<Group />
can be nesting
Notice:
- Don't forget wrap your app with
<DisplayControlProvider />
, let's implement it insrc/App.tsx
orsrc/index.tsx
- Regarding nextjs, you can implement
<DisplayControlProvider />
inpages/_app.tsx
- Regarding nextjs, you can implement
- 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
- You can check
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 isrender
, 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 iscss
, 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 adddisplay: 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)
- Example 1:
- displayAll: show all
<Item />
inside a<Group />
- hideAll: hide all
<Item />
inside a<Group />
- state: all display state infomation of
- Description: return value type of
useDisplayControl
:- Type:
(groupId: string | number) => UseDisplayControlValue
- Type:
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago