Skip to content

feat: allow passing HTTP headers to SvgUri#2983

Open
patrickwehbe wants to merge 1 commit into
software-mansion:mainfrom
patrickwehbe:feat/svguri-headers
Open

feat: allow passing HTTP headers to SvgUri#2983
patrickwehbe wants to merge 1 commit into
software-mansion:mainfrom
patrickwehbe:feat/svguri-headers

Conversation

@patrickwehbe

Copy link
Copy Markdown

Summary

Adds an optional headers prop to the URI-based components so requests for remote SVGs can carry custom HTTP headers (for example an Authorization token, or a header that tells the server which variant to return). This is the feature requested in #2320.

The prop is modelled on React Native's ImageURISource.headers, so it should feel familiar to anyone who already sets headers on <Image source={{ uri, headers }} />.

Changes

  • fetchText / fetchUriData (src/utils/fetchData.ts) take an optional headers map and forward it to fetch(uri, { headers }).
  • headers?: Record<string, string> is added to UriProps in src/xml.tsx.
  • The prop is passed through from SvgUri, SvgFromUri, SvgCssUri and SvgWithCssUri. The effect dependency array and the class componentDidUpdate checks include headers, so swapping the headers re-fetches.
  • Added apps/common/test/Test2320.tsx demonstrating the prop, and registered it in the test index.

Notes

  • This is opt-in and fully backward compatible. When headers is omitted, fetch is called exactly as before.
  • As noted in the issue, callers should keep the headers object referentially stable (e.g. useMemo) to avoid re-fetching on every render. The example does this.
  • Local SVGs loaded via require() don't go through the network, so they're unaffected.

Test plan

  • yarn tsc passes.
  • yarn lint passes.
  • The new example type-checks against apps/common.

Closes #2320

Thread an optional `headers` prop through the URI components so requests
can carry custom HTTP headers, modelled on React Native's
`ImageURISource.headers`. The prop is optional and defaults to the
previous behaviour, so existing usage is unaffected.

`fetchText`/`fetchUriData` now accept an optional headers map and forward
it to `fetch(uri, { headers })`. `headers` is added to `UriProps` and
passed from `SvgUri`, `SvgFromUri`, `SvgCssUri` and `SvgWithCssUri`,
including in the effect/`componentDidUpdate` paths so changing the
headers re-fetches.

Closes software-mansion#2320
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add HTTP headers to <SvgUri>

1 participant