Comments (14)
Just an FYI, if you look at the following example:
TypeScript Playground - Proposed Solution Issues
I think we're going to have to go with something closer to my first suggested solution. I'll still go ahead and submit a PR but would like to get your thoughts using that as evidence for my findings. Thanks in advance!
from react-socks.
Totally agreed, as my suggestion was only a temporary solution.
As my react app was not compiling with that error you mentioned, that temporary solution solved the issue for me, and could solve (tomporary) to another person who read your issue and was hurting only for the first part
from react-socks.
@dbryantm and @flexdinesh It seems, we are expecting any props (see here) and replace it with breakpoint.
In this case consumer can pass any props (sm
, md
, lg
, small
, medium
, large
).
Possible Solution: 1
As @dbryantm mentioned, we can introduce a new props breakpoint
where consumer can pass custom breakpoint.
<Breakpoint breakpoint="small" down>
</Breakpoint>
Possible Solution: 2
We can add an unknown property in the Props
interface Props {
children?: React.ReactNode;
up?: boolean;
down?: boolean;
only?: boolean;
tagName?: string;
className?: string;
[breakpoint: string]: string
}
Let me know your thoughts.
from react-socks.
@nutboltu When we started, the biggest highlight of this lib was its sugary syntax (being able to pass multiple breakpoints with shorthands) and I'd like to keep it that way unless there's a performance or demonstrated bad practice in play.
Solution 2 seems convincing to me. It will keep TS consumers happy while retaining the syntax. What do you all think? @dbryantm @guschnwg @nutboltu
from react-socks.
@flexdinesh @nutboltu My radio silence was due to me trying to think of better options. I like the computed property option though I would keep inline with making it a boolean:
interface Props {
children?: React.ReactNode;
up?: boolean;
down?: boolean;
only?: boolean;
tagName?: string;
className?: string;
[breakpoint: string]: boolean;
}
Let me know your thoughts. I could submit a PR for this and the two hooks that need to export their typings also.
from react-socks.
+1 for Solution 2 then 🎉 .
from react-socks.
@dbryantm Thanks for fixing the unknown props issue in a cleaner way. it looks good to me.
from react-socks.
Changes published in v2.0.1
. Thanks @dbryantm @nutboltu @guschnwg! 🎉
from react-socks.
My breakpoints are small
, medium
and large
, somewhere in my app I added the file socks.d.ts
with the following code:
namespace ReactSocks {
interface Props {
children?: React.ReactNode;
up?: boolean;
down?: boolean;
only?: boolean;
tagName?: string;
className?: string;
small?: boolean;
medium?: boolean;
large?: boolean;
}
}
from react-socks.
I've already done something very similar. Though it would probably be good to either document it on the README or update the typings to make them work as advertised. Also, your example doesn't account for the missing hook typings which should at the least be included in the type definitions. I like the library and it's also mainly a suggestion to prevent developers with less TypeScript experience running into issues.
from react-socks.
@dbryantm Thanks for the report. Would you be interested in improving this? Quite honestly TypeScript is a bit out of my depth.
from react-socks.
@nutboltu Perhaps you'd like to add something to this discussion?
from react-socks.
@dbryantm Sounds great. Please go ahead with PR. 🎉
from react-socks.
@nutboltu Would you be able to review the PR? TypeScript is a bit out of my depth.
from react-socks.
Related Issues (20)
- Tests fail HOT 1
- Cannot Resolve Symbol 'BreakpointProvider' HOT 2
- Any thought of adding `style` to a Breakpoint? HOT 1
- Debounce should cancel in ComponentWillUnmount HOT 2
- TypeScript typings? HOT 3
- { setDefaultBreakpoints } is not working properly
- Component Flashes on Screen HOT 5
- Styling on Mobile in build is lost HOT 5
- Hard Refresh in Browser Produces Warning and Incorrect CSS HOT 8
- Handling height HOT 7
- Consider throttling the window resize event HOT 2
- Server side rendering wrong css styles HOT 9
- TypeError: Super expression must either be null or a function HOT 8
- Class name for undefined breakpoint HOT 3
- `window.removeEventListener` isn't removing the event listener HOT 2
- Not working with Swiper
- Typescript error with `style` prop
- Server-side rendering issue HOT 2
- We could use `matchMedia` to pass in custom media queries HOT 5
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 react-socks.