**feat**: provide svg props in onload #2540
Open
Conversation
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
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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