Skip to content

Commit ac26601

Browse files
authored
Update README.md
1 parent 1791b6f commit ac26601

File tree

1 file changed

+31
-1
lines changed

1 file changed

+31
-1
lines changed

README.md

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,36 @@ module.exports = {
9393
}
9494
```
9595

96+
### Typescript
97+
98+
99+
100+
```typescript
101+
//declare a module to your type definitions files *.d.ts
102+
interface ResponsiveImageOutput {
103+
src: string
104+
srcSet: string
105+
placeholder: string | undefined
106+
images: { path: string; width: number; height: number }[]
107+
width: number
108+
height: number
109+
toString: () => string
110+
}
111+
112+
declare module '*!rl' {
113+
const src: ResponsiveImageOutput
114+
export default src
115+
}
116+
```
117+
118+
```
119+
import responsiveImage from 'img/myImage.jpg?sizes[]=300,sizes[]=600,sizes[]=1024,sizes[]=2048!rl';
120+
import responsiveImageWebp from 'img/myImage.jpg?sizes[]=300,sizes[]=600,sizes[]=1024,sizes[]=2048&format=webp!rl';
121+
...
122+
```
123+
124+
---
125+
96126
Then import images in your JavaScript files:
97127

98128
```js
@@ -161,7 +191,7 @@ ReactDOM.render(
161191
)
162192
```
163193

164-
You can also use JSON5 notation:
194+
You can also use [JSON5](https://json5.org/) notation:
165195

166196
```
167197
<source srcSet={require('./image.jpg?{sizes:[50,100,200,300,400,500,600,700,800], format: "webp"}').srcSet} type='image/webp'/>

0 commit comments

Comments
 (0)