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.

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.