The onLoad handler is called when the SVG is loaded, but does not provide any information about the SVG nor reference it. In this change, the onLoad handler is not called with the SvgProps of the loaded SVG (e.g. height, width, viewBox etc) - so basically the attributes of the root <svg>tag.
The SvgProps are now provided to the onLoad handler of the SvgUri and SvgCssUri components. Then we can react on different aspects of the SVG when loaded.
Background: Had an issue with SVGs not scaling correctly when changing the height of the image. With the handler I could fix my problem on my app side. I can imagine other use cases for this feature and decided to contribute this change here.
This PR does not fix the issue I had, but adds the feature for the onLoad handler. Any ideas to fix the issue itself are warmly welcome. The issue is described in the PR's test case.
Other considerations in this PR:
using useMemo or UseEffect in conditionals/try-catch is not recommended, so restyled this code structure.
Test Plan
The added test showcase uses the onLoad handler to calculate the required with to keep the aspect ratio. It is tested on the SvgUri and the SvgCssUri component.
Screenshot of the test example (Android):
What's required for testing (prerequisites)?
XCode / Android studio
Open the UI test
What are the steps to reproduce (after prerequisites)?
Just open the test example
Compatibility
OS
Implemented
iOS
✅❌
MacOS
✅❌
Android
✅❌
Web
✅❌
Checklist
[X] I have tested this on a device and a simulator
[X] I added documentation in USAGE.md
[X] I updated the typed files (typescript)
[X] I added a test for the API in the __tests__ folder
Summary
The onLoad handler is called when the SVG is loaded, but does not provide any information about the SVG nor reference it. In this change, the onLoad handler is not called with the SvgProps of the loaded SVG (e.g. height, width, viewBox etc) - so basically the attributes of the root
<svg>tag.The SvgProps are now provided to the onLoad handler of the SvgUri and SvgCssUri components. Then we can react on different aspects of the SVG when loaded.
Background: Had an issue with SVGs not scaling correctly when changing the height of the image. With the handler I could fix my problem on my app side. I can imagine other use cases for this feature and decided to contribute this change here.
This PR does not fix the issue I had, but adds the feature for the onLoad handler. Any ideas to fix the issue itself are warmly welcome. The issue is described in the PR's test case.
Other considerations in this PR:
Test Plan
The added test showcase uses the onLoad handler to calculate the required with to keep the aspect ratio. It is tested on the SvgUri and the SvgCssUri component.
Screenshot of the test example (Android):
What's required for testing (prerequisites)?
XCode / Android studio
Open the UI test
What are the steps to reproduce (after prerequisites)?
Just open the test example
Compatibility
Checklist
USAGE.md__tests__folder