Proposal: render the UI conditionally
See original GitHub issueSometimes, it is useful to show the pane conditionally, while everything works the same. In my case, I need to show the pane only to designers and not the client. I achieve this via a special url, and I have a check like
export const DEBUG = window.location.search.includes('?debug')
which check if ?debug
is appended to the url.
WIth use-tweaks
, we achieved this with a really dirty useTweaksOnDebug
:
const getValuesFromTweaks = (...args: any[]) => {
const obj = typeof args[0] === 'object' ? args[0] : args[1]
const getEntries = (obj: any): any => {
return Object.keys(obj).flatMap((k) => {
const v = obj[k]
if (v.type !== undefined) {
if (v.type === 1) {
// Folder
return getEntries(v.schema)
} else {
// Button or Separator
return []
}
} else {
return [[k, v.value ?? v]] // array of tuple because of flatmap
}
})
}
return Object.fromEntries(getEntries(obj))
}
export const useTweaksOnDebug: typeof useTweaks = DEBUG ? useTweaks : getValuesFromTweaks
I don’t know how the API of this would look like if we plan to remove the <Twix>
component, any solution is appreciated.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:6 (3 by maintainers)
Top Results From Across the Web
7 Ways to Implement Conditional Rendering in React ...
Conditional rendering is a term to describe the ability to render different user interface (UI) markup if a condition is true or false....
Read more >Conditionally render ui:define - jsf - Stack Overflow
The <ui:insert> runs during view build time, so it's not possible to conditionally render it by a property which is set via <f:viewParam>...
Read more >How do you do conditional rendering in React?
You can use conditional rendering to see whether the object you have fetched is available for rendering. Otherwise, do not render the object....
Read more >Conditional Rendering - React
Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to...
Read more >5 simple way for conditional rendering in JSX - DevDojo
With React, we can create powerful web applications that provide state of the art UI and a high level of interactivity.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Great! Should be fixed by a7ce7fc, sorry for not making a PR!
IMO this is important - and easy - enough to be req for v1