Comments (17)
Thanks so much for this!
@morajabi Seems like the PR for adding typings has been merged, would it be possible to do a new release with those changes?
from styled-media-query.
[email protected]
has been published, which include Typescript types, this issue can be closed.
Thanks @morajabi !
from styled-media-query.
I don't see any issue with 1st here! @franky47 take a look and if you managed to come up with a type definition, you're more than welcome to do a PR!
from styled-media-query.
At the moment I have a working implementation which covers most use cases but does not give any intellisense when using types for styled-components themes.
For the sake of consistent developer experience, it would be preferable to have relevant suggestions when editing styles nested under a media query. Since the types required to do that have changed between styled-components
v3 and v4, I'll wait for PR #14 (and probably #15 as I could use some automated tests in verifying the types match) to be merged to propose this new feature.
from styled-media-query.
@franky47 I'm using WebStorm and, yes, changing it to keyof Breakpoints | string
still gives me the same autocompletion as before
from styled-media-query.
@morajabi @franky47 am I correct in thinking that
export interface MediaGenerator<Breakpoints, Theme> {
lessThan: <Props>(
breakpoint: keyof Breakpoints
) => GeneratorFunction<Props, Theme>
greaterThan: <Props>(
breakpoint: keyof Breakpoints
) => GeneratorFunction<Props, Theme>
between: <Props>(
fist: keyof Breakpoints,
second: keyof Breakpoints
) => GeneratorFunction<Props, Theme>
}
should actually be
export interface MediaGenerator<Breakpoints, Theme> {
lessThan: <Props>(
breakpoint: keyof Breakpoints | string
) => GeneratorFunction<Props, Theme>
greaterThan: <Props>(
breakpoint: keyof Breakpoints | string
) => GeneratorFunction<Props, Theme>
between: <Props>(
fist: keyof Breakpoints | string,
second: keyof Breakpoints | string
) => GeneratorFunction<Props, Theme>
}
styled-media-query
allows you to pass in a custom size to lessThan
, greaterThan
and between
(see https://github.com/morajabi/styled-media-query#lessthan). The current typings only allow you to pass in a defined breakpoint.
from styled-media-query.
Yes please. It would be perfect!
from styled-media-query.
Cool! Can you help maybe?
from styled-media-query.
Hi, is it available ?
from styled-media-query.
Yes! Do you want to pick it up?
from styled-media-query.
I could probably help here, I use TypeScript and I'd definitely like to see this library supported.
There are two options here:
- Bundle the
.d.ts
type definition file with this module and store it in this repository - Place it under the
@types
organisation inDefinitelyTyped/DefinitelyTyped
For the sake of simplicity of installation and maintenance, I'd go for option 1, what do you think ?
from styled-media-query.
As a side note, in order for base types to correctly resolve to a user-defined ThemeInterface, PR DefinitelyTyped#30511 for @types/styled-components
will be needed as well, I'll keep an eye on it.
from styled-media-query.
This is what it would look like at the moment to get support for both ThemeInterface and custom Props passed to the styled component:
// src/custom/styled-media-query.ts
import { generateMedia } from 'styled-media-query'
import ThemeInterface from './theme'
interface Breakpoints {
phone: string
tablet: string
laptop: string
desktop: string
}
const media = generateMedia<Breakpoints, ThemeInterface>({
phone: '400px',
tablet: '600px',
laptop: '1200px',
desktop: '1500px'
})
export default media
Usage to create styled components:
// MyComponent.tsx
import styled from 'src/custom/styled-components' // `styled` with ThemeInterface
import media from 'src/custom/styled-media-query'
interface Props {
active: boolean
}
const StyledComponent = styled.div<Props>`
color: ${p => p.active ? p.theme.primary : p.theme.secondary};
${media.greaterThan<Props>('mobile')`
color: ${p => p.active ? p.theme.secondary : p.theme.primary};
`};
`
Ideally, I'd like to find a solution that does not involve passing the Props type to media.greaterThan<Props>('mobile')
, but my knowledge of TypeScript does not (yet) cover composition of tagged template literals interpolations and type closures (if there's anything of the sort).
from styled-media-query.
@franky47 I tried your solution, but I'm getting an error.
Did you get the same one?
A weird TypeScript issue.
from styled-media-query.
@angay9 it looks like the type definitions are not found in your case. PR #16 is not yet merged, so public releases of styled-media-query
don't include typings yet.
What is your setup ?
from styled-media-query.
@franky47 I'm using React js with Typescript.
from styled-media-query.
Indeed, however I'm not sure how this would play with autocompletion (does it still give you the keys of Breakpoints
but allow to pass any other string ?)
from styled-media-query.
Related Issues (19)
- Add tests with Jest HOT 9
- Discussion for v3 API for more flexibility and readability HOT 15
- Reduce the bundle size HOT 2
- Misleading API HOT 12
- Syntax highlight for Webstorm? HOT 2
- Add .between method to css media generators
- Issue with TypeScript and custom props HOT 1
- [TypeScript] Wrong Type Definition HOT 11
- Dark color scheme support (via prefers-color-scheme media query)
- Add overlap between screens HOT 4
- Package publish automation
- [feature request] Specific Devices
- Syntax highlight and Intellisense custom media HOT 3
- defining generateMedia breakpoints using type Number HOT 2
- Is this project dead? HOT 2
- Build with Rollup and support commonjs and umd
- Library fails to get "uglified" by webpack 2. HOT 11
- What do you think about the new API for version 2.0.0 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 styled-media-query.