Created
June 19, 2020 20:38
-
-
Save domitriusclark/d5d127a1859b51d7aaa15615760d0256 to your computer and use it in GitHub Desktop.
This file contains 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
| function Image({ publicId, transformations, width, height, alt }) { | |
| const { generateUrl, url, status, error } = useImage({ cloudName: 'testing-hooks-upload' }); | |
| React.useEffect(() => { | |
| // Now instead of getImage, we call the `generateUrl` function, better describing the action we're taking internally and what to expect back | |
| generateUrl({ | |
| publicId, | |
| transformations: { | |
| // by supplying height and width seperately from the transformations object, | |
| // we can use the height and width to dictate the size of the element AND the transformations | |
| height, | |
| width, | |
| // then we can spread the rest of the transformations in | |
| ...transformations | |
| /* | |
| you'll also be getting these automatically attached from internals | |
| fetchFormat: 'auto', | |
| quality: 'auto', | |
| crop: 'scale' | |
| */ | |
| } | |
| }); | |
| }); | |
| // status can either be "success", "loading", or "error" | |
| if (status === 'loading') return <p>Loading...</p>; | |
| // we can check if the status of our request is an error, and surface that error to our UI | |
| if (status === "error") return <p>{error.message}</p> | |
| return ( | |
| <img | |
| // we also have changed `data` to `url` to better describe what `generateUrl` gives us back and makes more sense to pass to `src` | |
| src={url} | |
| alt={alt} | |
| /> | |
| ) | |
| } | |
| function Main() { | |
| return ( | |
| <Image | |
| publicId="test toasts" | |
| height={1200} | |
| width={600} | |
| /> | |
| ) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment