JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 959807
  • Score
    100M100P100Q198170F
  • License MIT

A light and trustworthy URL polyfill for React Native

Package Exports

  • react-native-url-polyfill

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-url-polyfill) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Library's logo

React Native URL Polyfill

A light and trustworthy URL polyfill for React Native

Current npm package version. Current CircleCI build status. PRs welcome! React Native URL Polyfill is released under the MIT license.


react-native-url-polyfill is a full implementation of the WHATWG URL Standard that has been optimized for React Native.

  • Trustworthy. Follows closely the URL Standard spec, and relys on unit tests and Detox e2e tests within React Native.
  • Light. Instead of using directly whatwg-url, this polyfill uses a forked version (whatwg-url-without-unicode) where unicode support has been stripped out — Going down from 361 KB to 54 KB.
  • Blob support. Supports React Native's Blob without additional steps.

Why do we need this?

React Native does include a polyfill for URL, but this polyfill is homemade — in order to keep it light-weight — and was initially created to handle specific use cases.

Meanwhile, React Native has grown around that polyfill, then some unexpected errors have arisen.

Known issues (non-exhaustive) with React Native's URL are:

Unfortunately, adding this polyfill to React Native will means adding đŸ“Ļ 84.76 KB to the JavaScript bundle, even if you don't use URL because 🚇 Metro doesn't support optional imports.

That's why you may need this external dependency. So, if you use URL within your app, you probably want to take a look at the installation steps below!

Installation

First, you need to install the polyfill, which can be done with Yarn or npm.

Yarn

yarn add react-native-url-polyfill

npm

npm install --save react-native-url-polyfill

Then, the polyfill can be used in multiple ways. Pick your preferred option.

â„šī¸ To verify if the polyfill has been correctly applied, you can check if the global variable REACT_NATIVE_URL_POLYFILL contains the current package and version like: react-native-url-polyfill@CURRENT_VERSION.

Option 1 (Simple)

Locate your JavaScript entry-point file, commonly called index.js at the root of your React Native project.

Then, import react-native-url-polyfill/auto at the top of your entry-point file, the polyfill will be automatically applied.

import 'react-native-url-polyfill/auto`;

Option 2 (Flexible)

If you want to apply the polyfill when you're ready, you can import setupURLPolyfill and call it yourself.

âš ī¸ Metro doesn't support optional imports.

If you do not apply the polyfill, it will still be added to your JavaScript bundle. Even if it's wrapped in a condition, Metro won't strip it in production.

import { setupURLPolyfill } from 'react-native-url-polyfill';

setupURLPolyfill();

Option 3 (Convenient)

If you prefer not to apply this polyfill over React Native's default URL, you can still import those classes manually when you want them.

import { URL, URLSearchParams } from 'react-native-url-polyfill';

const url = new URL('https://github.com');
const searchParams = new URLSearchParams('q=GitHub');

License

react-native-url-polyfill is MIT licensed.