DisplayWhen

This is a convenience wrapper component to enable simple conditional rendering based on various criteria, like screen width or the current user's permissions.

If the render conditions aren't met, or if no props are provided, the component returns null in order to not render the child components.

Depend on screen size

When responding to screen size, this component dynamically re-renders the page to fit any changes to the screen size (shrinking window, rotating phone etc...), so that the user is always receiving the content most optimized for their screen size.

<DisplayWhen> depends on the ResponsiveLayoutContext to get information about the current screen dimensions, and provides a set of props to dictate simple logic for when to render the child components.

You can specify a boolean prop for when to render child components

<DisplayWhen narrow>
    <p>This content is displayed on narrow screens</p>
</DisplayWhen>

There are three valid width names: narrow, medium, and wide.

It is possible to provide multiple boolean props

<DisplayWhen narrow>
    <p>This content is displayed on narrow screens</p>
</DisplayWhen>
<DisplayWhen medium wide>
    <p>This content is displayed on medium and wide screens</p>
</DisplayWhen>

You can also provide explicit conditions on when to render using the minWidth and maxWidth props. The sizes are inclusive, and should be specified the sizes as strings with "px" suffix.

Specifying minWidth or maxWidth trumps the named width props like narrow.

<DisplayWhen maxWidth="850px">
    <p>This content is only displayed on screens 850px wide or narrower</p>
</DisplayWhen>
<DisplayWhen minWidth="900px">
    <p>This content is only displayed on screens that are 900px wide or wider</p>
</DisplayWhen>
<DisplayWhen minWidth="700px" maxWidth="1000px">
    <p>This content is only displayed on screens 700px to 1000px wide (including both values).</p>
</DisplayWhen>

Depend on scopes (user permissions)

<DisplayWhen allScope={[scope1, scope2]}>
    <p>This content is displayed only when scope1 AND scope2 are both granted to the logged-in user.</p>
</DisplayWhen>
<DisplayWhen anyScope={[scope1, scope2]}>
    <p>This content is displayed only when scope1 OR scope2, or both, are granted to the logged-in user.</p>
</DisplayWhen>
<DisplayWhen allScope={scope1}>
    <p>Both scope props will accept a single scope string.</p>
</DisplayWhen>

Depend on specific times

You can provide a before and/or after prop to DisplayWhen in order to restrict certain components to a specific date or time. This is useful for situations where the app use is timeboxed (e.g. special considerations for exams) and you want to prevent the need to deploy a new app version to prevent users from submitting after the fact.

Dates should be in ISO format where possible, but DisplayWhen can take any reasonably formatted date and will assume a timezone of +10:00 for any format that doesn't contain it's own timezone information.

<DisplayWhen after="2021-02-21">
    <p>This content is only displayed from 00:00:01am on the 21st of February 2021 (townsville time, the default TZ of +10)</p>
    <p>Any people outside UTC+10 will still be restricted, but the time will be adjusted for their TZ
    (e.g. the app will open in singapore (+08) at 10pm on the 20th of February 2021)</p>
</DisplayWhen>
<DisplayWhen before="2021-02-21T20:00:00+10">
    <p>This content will be displayed until 8pm on the 21st of February 2021 (townsville time)</p>
</DisplayWhen>
<DisplayWhen after="2021-02-21T08:00:00" before="2021-02-21T20:00:00">
    <p>This content will be displayed between 8am and 8pm on the 21st of February 2021 (townsville time)</p>
</DisplayWhen>

Inverting the logic

DisplayWhen has an additional boolean prop, not, which if specified will invert the display logic.

Future Directions

Due to emerging technologies in the digital signage space, more options and/or breakpoints may be required to meet the unique dimensions of digital signage screens.