Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-shielded

jacobbuck15.5kMIT2.1.0

Add the Women's Refuge Shielded Site button to your React website

react, component, shielded, nz, Womans Refuge, New Zealand

readme

react-shielded

Add the Women's Refuge Shielded Site button to your React website.

What's Shielded?

From The Shielded Site Project website:

We’ve created a tool for victims of abuse to ask for help, without fear of it showing up in their browser’s history or an abusive partner ever seeing it. A simple icon which can sit on any website and launch a powerful resource to help end domestic violence.

screenshot

Features

  • :100: Rewrite of the Shielded script in React.
  • :lock: No external resources requested—except the iframed content.
  • :black_nib: Hand-crafted vector icons.
  • :wheelchair: Accessibility support.

Usage

Install with your favourite package manager:

npm install react-shielded or yarn add react-shielded.

:warning: Requires React v16.14.0 or higher.

Import in the Shielded component:

import Shielded from 'react-shielded';

Use in your React app:

  ...
  <Shielded />
  ...

And that's it!

changelog

Changelog

v2.1.0 - 2023-03-29

Changed

  • Modal updated to handle "Accessibility improvements for shielded widget".
  • Modal listens to message event on window to detect close button clicked in iframe.

Removed

  • Removed close button.
  • Removed loading indicator.

v2.0.2 - 2022-04-14

Changed

v2.0.1 - 2021-12-15

Added

Changed

v2.0.0 - 2021-12-14

Changed

  • BREAKING Changed JSX transform to use new React JSX runtime.

Removed

  • Removed propTypes property from components.

v1.6.0 - 2020-09-25

Changed

  • Updated propTypes to only be defined in non-production environments.
  • Updated React import to avoid using default import.
  • Updated styles to use numbers (instead of strings) where possible.

v1.5.0 - 2020-09-05

Added

  • Added background to loading state that matches iframe contents.

Changed

  • Improved labels for screen readers and other assistive technologies.
  • Replaced styles from injected CSS to inline styles for better SSR support.
  • Replaced CSS animation of spinner with SVG animation inside spinner.svg.
  • Updated close.svg to no longer have textured background.

Removed

  • Removed @babel/runtime dependency for Babel helpers.
  • Removed error handler for iframe and always display iframe and close button.
  • Removed explicit react-dom peer-dependency.

v1.4.1 - 2020-09-04

Fixed

  • Added checks to ensure nodes exist before calling DOM methods.
  • Fixed a bug where the shielded button would try gain focus on mount.

v1.4.0 - 2020-09-02

Changed

  • Changed how overflow style on <body> element is reverted to prevent taking higher specificity over app styles.
  • Replaced internal Portal component with react-document-portal.
  • Replaced all uses of useLayoutEffect hook with useEffect hook.

v1.3.0 - 2020-07-10

Added

Changed

  • Bumped up version of react-use-keypress to v1.0.1.
  • Reduced build output of SVG components.

v1.2.0 - 2020-05-19

Added

  • Added ES Module build.

Changed

  • Enabled loose mode on '@babel/preset-env' to reduce build output.
  • Replaced internal useEscapeKey hook with react-use-keypress.

Removed

  • Removed prop-types, as Shielded component doesn't have props.

v1.1.0 - 2020-04-27

Changed

  • Update URLs to new staticcdn.co.nz domain.

Fixed

  • Fixed a bug in internal useEscapeKey hook.

v1.0.0 - 2019-10-26

Initial public version! :tada: