export element props without [key: string]: any;
See original GitHub issueFeature Request
Problem description
We use typescript and HOC in our project. There are many cases where we wrap a semantic element and need to remove a property. For example,
- we have a HOC which wraps Dropdown component and passes
optionthough redux. Then we need to removeoptionfrom props - we introduced a default property but the only clean way to define the typescript is using HOC to change a required prop to be optional
In both cases, we need to utilize Omit (reference) operation to remove a key from Semantic element’s prop type definition. However each type definition from Semantic contains [key: string]: any; which makes Omit not working
Proposed solution
export a type definiton without [key: string]: any; for HOC to use.
MVP
Take button as example Current code:
export interface ButtonProps {
[key: string]: any;
/** An element type to render as (string or function). */
as?: any;
/** A button can show it is currently the active user selection. */
active?: boolean;
}
Proposal
export interface ButtonPropsStrict {
/** An element type to render as (string or function). */
as?: any;
/** A button can show it is currently the active user selection. */
active?: boolean;
}
export interface ButtonProps = ButtonPropsStrict & { [key: string]: any; }
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Useful Patterns by Use Case - React TypeScript Cheatsheets
Wrapping/Mirroring a HTML Element ... no error return <Button type="button"> text </Button>; ... string; } export function Button(props: ButtonProps) {
Read more >How to pass an object as a prop in React using typescript?
To elaborate on #1: The props passed into DisplayPerson is an object where the key is the prop name and the value is...
Read more >and how to pass props to components in React . (part_1)
This a common question for React beginners and the answer for it is brief: there is no way to pass props from a...
Read more >How to use Props in React - Robin Wieruch
This a common question for React beginners once they learned about props in React and the answer for it is brief: there is...
Read more >Typechecking With PropTypes - React
For some applications, you can use JavaScript extensions like Flow or TypeScript to typecheck your whole application. But even if you don't use...
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 Free
Top 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

@levithomason I’ve created a PR for Dropdown. If you a fine with the change, I will apply the change to more components.
There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.
However, PRs for this issue will of course be accepted and welcome!
If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!