Comments (18)
from reactshadow.
from reactshadow.
Still haven't looked into it more, sorry. I'll open a PR with what I have so far tonight
from reactshadow.
I made my try in the end and that's what I ended up with for now:
declare module 'react-shadow' {
import { ReactNode, ComponentType } from 'react';
type RenderElement = keyof HTMLElementTagNameMap;
type Root = {
[name in RenderElement]: ComponentType;
}
const root: Root;
export default root;
}
If you have any idea what is wrong or how I can improve these typings - please feel free to share!
from reactshadow.
@yurist38 your types were really helpful for me. I think this might be a slight improvement:
declare module "react-shadow" {
import * as React from "react";
type RenderElement = keyof HTMLElementTagNameMap;
type Root = {
[name in RenderElement]: React.ComponentType<
React.HTMLAttributes<HTMLElementTagNameMap[name]>
>;
};
const ReactShadowRoot: Root;
export default ReactShadowRoot;
}
I'm just passing a type argument of React.HTMLAttributes<HTMLElementTagNameMap[name]>
to React.ComponentType
. It's not quite right though because if the element is a button for instance we should be using React.ButtonHTMLAttributes
instead of React.HTMLAttributes
, but it did solve a type error I was getting.
from reactshadow.
I've opened a PR based on the solution from @benji6 (thanks for that!). Let's see if it's going to be merged...
from reactshadow.
I'd rather keep it as standard JS.
Would be awesome to have a definition file though – thanks @nmussy!
from reactshadow.
No problem, I'll probably make a PR tonight. It should be pretty easy to maintain, but you can @ me in the future if you need me to update it.
from reactshadow.
Thank you @nmussy 👍
from reactshadow.
Also wanted to use the package in TS, but ran into definitions absence.
I'm still not sure I need to use it, but if I decide, I can create definitions myself.
Any news on this? @nmussy
from reactshadow.
Any luck folks?
from reactshadow.
Same issue.. can we help?
from reactshadow.
I'm about to start using it and missing TS definitions too... If you guys have any draft of definitions and have no time to complete, please commit the stuff and let us know. Some of us can contribute to making it done, I'm pretty sure.
from reactshadow.
from reactshadow.
Same problem here. Any luck fixing it?
from reactshadow.
Still no luck guys?
from reactshadow.
@yurist38 just a question of how HTMLElementTagNameMap
works if you're using custom elements? For example root.myCustomElement
that yields a <my-custom-element>
node is perfectly fine in react-shadow
, whereas HTMLElementTagNameMap
seems to be a map of only the standard HTML elements.
Wouldn't that cause issues? Do we need to allow for arbitrary string
types, too?
from reactshadow.
@Wildhoney yes, your concern was correct. Just tested it locally, it doesn't work with a custom element. So I think you're right and we have to make it less strict... I'm opening a PR with refactoring to string
.
from reactshadow.
Related Issues (20)
- How can I use Shadow DOM content distribution with `react-shadow`? ( mix light with shadow, use `<slot>`) HOT 3
- Can useLayoutEffect() be used instead of useEffect() to make rendering synchronous? HOT 3
- How to use ReactShadow with ChakraUI Drawers? HOT 1
- Is there any chance to have a working example with CRA and TS? HOT 1
- Lib stopped working on iOS 15? HOT 1
- Shadow tree inheriting from parent HOT 2
- Does it support new mui lib?
- [feature request] allow consumers to pass options to emotion
- global requires a polyfill. Shall we replace global with globalThis? HOT 2
- styled-components is not defined as a peer dependency HOT 1
- Update dependency to React 18? HOT 5
- Trouble Loading Custom Font Into Shadow DOM in my Chrome Extension
- template content is empty with react HOT 1
- Example links in readme are both broken
- Children of the shadow root cannot get retrieved at parent level within a useEffect
- Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree HOT 1
- Remove react-use dependency due to package size
- shadowroot has been depricated need to update with shadowrootmode in template element HOT 2
- Next.js v13 failed to build "TypeError: e.createContext is not a function" HOT 1
- Css Variables from External URL link inside of a shadow dom not getting recognized
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 reactshadow.