Skip to content

Commit b5022c3

Browse files
authored
docs(readme): responsive section
1 parent ab7473e commit b5022c3

File tree

1 file changed

+17
-0
lines changed

1 file changed

+17
-0
lines changed

README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -245,6 +245,23 @@ const MyLoader = () => (
245245

246246
## Troubleshooting
247247

248+
#### Responsive - Mobile version
249+
250+
In order to avoid unexpected behavior, the package doesn't have opinioned settings. So if it needs to be responsive, have in mind that the output of package is a regular SVG, so it just needs the same attributes to become a regular SVG responsive, which means:
251+
252+
```jsx
253+
import { Code } from 'react-content-loader'
254+
255+
const MyCodeLoader = () => (
256+
<Code
257+
width={100}
258+
height={100}
259+
viewBox="0 0 100 100"
260+
style={{ width: "100%" }}
261+
/>
262+
)
263+
```
264+
248265
#### Server-side rendering (SSR) - Match snapshot
249266

250267
As the main component generates random values to match the id of the SVG element with background style, it can encounter unexpected errors and unmatching warning on render, once the random value of id will be generated twice, in case of SSR: server and client; or in case of snapshot test: on the first match and re-running the test.

0 commit comments

Comments
 (0)