JSPM

@datenanfragen/components

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • 0
  • Score
    100M100P100Q41375F
  • License MIT

This package allows you to use the components making up Datenanfragen.de outside of the website repository.

Package Exports

  • @datenanfragen/components
  • @datenanfragen/components/dist/index.mjs

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 (@datenanfragen/components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Datenanfragen.de components for external use

This package allows you to use the components making up Datenanfragen.de outside of the website repository.

Datenanfragen.de is an open source project by Datenanfragen.de e. V., a registered non-profit from Germany. We have made it our mission to help you exercise your right to privacy. Through our website, we offer a generator for GDPR requests, among other things.

This package allows you to use the components making up that website elsewhere. We use this in our mobile and desktop app.

Setup

You can install the package using yarn or npm:

yarn add @datenanfragen/components
# or `npm i @datenanfragen/components`

First, you either need to call the exported setupWindow() function or do the setup in there yourself.

Then, you need to set window.LOCALE to the two-letter ISO code of the desired language, e.g.:

window.LOCALE = 'en';

You also need the following HTML:

<aside id=flash-messages></aside>

Finally, include the CSS:

@import 'npm:@datenanfragen/components/dist/index.css';

Usage

Now, you can use the exported components in your Preact code, e.g.:

import { render } from 'preact';
import { ActWidget } from '@datenanfragen/components';

const App = () => (
    <>
        <h1>Send a data request</h1>
        <ActWidget requestTypes={['access', 'erasure']} company="datenanfragen" transportMedium="email" />
    </>
);

const el = document.getElementById('app');
if (el) render(<App />, el);

Contributing

First of all, thank you very much for taking the time to contribute! Contributions are incredibly valuable for a project like ours.

We warmly welcome issues and pull requests through GitHub. They should be filed against the website repository, which this package is built from. You can also chat with us through our Matrix space. Feel free to ask questions, pitch your ideas, or just talk with the community.

Please be aware that by contributing, you agree for your work to be released under the MIT license, as specified in the LICENSE file.

If you are interested in contributing in other ways besides coding, we can also really use your help. Have a look at our contribute page for more details.