Comments (12)
i'd just like to add that the following works for both adding and removing inert
in React without using refs or DOM methods. note that the true assignment is empty string and the false assignment is null
. the true assignment can be any string as far as i can tell. the false assignment can be null
, undefined
, or false
.
<div inert={inertCondition ? '' : null} />
from inert.
Just to extend this a little, if you want conditional inertness in React you need something more like:
<div
ref={node => node && (shouldBeInert ?
node.setAttribute('inert', '') : node.removeAttribute('inert')
)}
/>
from inert.
If anyone needs a workaround until this is implemented I have solved it like this:
<div inert={disabled? "" : undefined}
inert undefined will not pass inert to the underlying DOM element and inert="" will pass to the DOM node and works like inert={true}
then:
declare global {
//TODO: remove this when inert is supported in React types
namespace JSX {
interface IntrinsicAttributes {
/**
* Boolean attribute indicating that the browser will ignore the element.
*
* @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert MDN Web Docs}
*/
inert?: "";
}
}
}
from inert.
Closing this as it's a React specific issue and I just wanted to document the workaround. You can see the discussion on React allowing custom attributes/properties here: facebook/react#140
from inert.
Thank you Tim!
from inert.
I am receiving node.setAttribute is not a function
when I try to use this. Any idea on how to solve this?
from inert.
@maracuja-juice you're getting this following @robdodson's example ?
hey @robdodson - the link above showing a functional snip at https://www.webpackbin.com/bins/-KmmTaOzo6tSQqTeIv2H appears to be gone
from inert.
@bkardell I'm using pimterry's example but I guess I will have the exact same behaviour if I would use the original suggestion as they're not that different.
from inert.
Can you share any running code? Can you add a debugger and see what node is there?
from inert.
Hm this sounds like an issue with how @maracuja-juice is using refs in React. I'm not super familiar with React but maybe in newer versions the ref syntax has changed?
from inert.
If you're by any chance using React with TypeScript and Linaria, do this:
const InertElement = styled.div<{ inert?: string | null }>`
/* your styles here */
`
Then, as @defnotrobbie suggested, you can use inert conditionally, and TypeScript will still be happy because we defined an additional prop:
<InertElement inert={inertCondition ? '' : null} />
from inert.
Declaring on namespace JSX
did not work for me, but this did:
declare module 'react' {
interface HTMLAttributes<T> extends DOMAttributes<T> {
/**
* Boolean attribute indicating that the browser will ignore the element.
*
* @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert MDN Web Docs}
*/
inert?: '';
}
}
from inert.
Related Issues (20)
- Injecting inline style violates strict style csp HOT 2
- Unknown Syntax error in IE HOT 4
- Is inert string or boolean? HOT 4
- module should not use src/index.js
- Transpile the module export HOT 1
- Specify exact browser support in MDN browser compat data
- How can I check if the polyfill is already loaded? HOT 3
- When inert library is imported more than once in a project, creates error HOT 2
- “So every modal dialog must be outside the inert container?” HOT 1
- Relation to content-visibility: hidden HOT 6
- License for NPM wicg/inert HOT 5
- should the _focusableElementsString include tabindex? HOT 3
- Video elements being focused HOT 1
- `Element is not defined` in deno
- Styles are too easily overridden
- Polyfill being applied in Chrome 102 HOT 3
- Tests should not run against browsers that have implemented inert
- Add new gh webhook?
- Status of incubation HOT 4
- W3C Software and Document License (2015/05/13) was expired HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from inert.