Last active
August 30, 2019 05:32
-
-
Save brettgullan/acb49bc6eb636fca8c70a8d7e333fd91 to your computer and use it in GitHub Desktop.
Responsive Configuration Builder - Token Builder Examples
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { TokenBuilder } from 'responsive-configuration-builder' | |
| const template = 'https://picsum.photos/id/{id}/{width}/{height}' | |
| const builder = TokenBuilder(template) | |
| const spec = { | |
| src: { | |
| width: '240px', | |
| ratio: '16 / 9', | |
| }, | |
| } | |
| const image = { | |
| id: 128, | |
| } | |
| const result = builder(spec, image) | |
| // Result: | |
| // { | |
| // src: `https://picsum.photos/id/128/240/135`, | |
| // } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { TokenBuilder } from 'responsive-configuration-builder' | |
| const template = 'https://picsum.photos/id/{id}/{width}/{height}' | |
| const builder = TokenBuilder(template) | |
| const spec = { | |
| srcset: { | |
| widths: [240, 320, 480], | |
| ratio: 16 / 9, | |
| }, | |
| } | |
| const image = { | |
| id: 128, | |
| } | |
| const result = builder(spec, image) | |
| // Result: | |
| // { | |
| // srcset: 'https://picsum.photos/id/128/240/135 240w, https://picsum.photos/id/128/320/180 320w, https://picsum.photos/id/128/480/270 480w' | |
| // } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { TokenBuilder } from 'responsive-configuration-builder' | |
| const template = 'https://picsum.photos/id/{id}/{width}/{height}' | |
| const builder = TokenBuilder(template) | |
| const spec = { | |
| sources: [ | |
| { | |
| srcset: { | |
| widths: [240, 320, 480], | |
| ratio: 3 / 2, | |
| }, | |
| }, | |
| { | |
| srcset: { | |
| widths: [640, 720, 960], | |
| ratio: 16 / 9, | |
| }, | |
| }, | |
| ], | |
| } | |
| const image = { | |
| id: 128, | |
| } | |
| const result = builder(spec, image) | |
| // Result: | |
| // { | |
| // sources: [ | |
| // { | |
| // srcset: | |
| // 'https://picsum.photos/id/128/240/160 240w, https://picsum.photos/id/128/320/213 320w, https://picsum.photos/id/128/480/320 480w', | |
| // }, | |
| // { | |
| // srcset: | |
| // 'https://picsum.photos/id/128/640/360 640w, https://picsum.photos/id/128/720/405 720w, https://picsum.photos/id/128/960/540 960w', | |
| // }, | |
| // ] | |
| // } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment