🟦 Stop war on Ukraine 🟨

Help Ukraine - add ribbon with Ukraine flag into the website you manage, show the anti-war message to Russian users, or block them from your service.

A lot of companies did this in their custom way but this library is supereasy option to do for everyone.

🎗️ Add ribbon with Ukraine flag on your website

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/main.js" integrity="sha384-Xn1RAG80M8PZlBQh3r8fUvHY7c8RtuplSnqXOkdJyCxqRsToRwJ1m2FP7vyJo7u/" crossorigin="anonymous"></script>
<script>
    Ukraine.save({
        ribbon: 'TOP_LEFT',
        hasShadow: true,
        countries: [],
    });
</script>

Or use other method of installation see below.

❎ I want to show banner for Russian users

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/main.js" integrity="sha384-Xn1RAG80M8PZlBQh3r8fUvHY7c8RtuplSnqXOkdJyCxqRsToRwJ1m2FP7vyJo7u/" crossorigin="anonymous"></script>
<script>
    Ukraine.save({
        isCancelable: true,
    });
</script>

Or use other method of installation see below.

🛑 I want to block website for Russian users

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/main.js" integrity="sha384-Xn1RAG80M8PZlBQh3r8fUvHY7c8RtuplSnqXOkdJyCxqRsToRwJ1m2FP7vyJo7u/" crossorigin="anonymous"></script>
<script>
    Ukraine.save({
        isCancelable: false,
    });
</script>

Or use other method of installation see below.

🩸 I want to show banner for Russian users but not include cruel graphic and blood

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/main.js" integrity="sha384-Xn1RAG80M8PZlBQh3r8fUvHY7c8RtuplSnqXOkdJyCxqRsToRwJ1m2FP7vyJo7u/" crossorigin="anonymous"></script>
<script>
    Ukraine.save({
        isBloodIncluded: false,
        isGraphicIncluded: false,
    });
</script>

Or use other method of installation see below.

🎗️🎗️🎗️🎗️ I want to have ribbon in multiple corners

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/main.js" integrity="sha384-Xn1RAG80M8PZlBQh3r8fUvHY7c8RtuplSnqXOkdJyCxqRsToRwJ1m2FP7vyJo7u/" crossorigin="anonymous"></script>
<script>
    Ukraine.save({
        ribbon: 'TOP_LEFT',
        hasShadow: true,
        countries: [],
    });
    Ukraine.save({
        ribbon: 'TOP_RIGHT',
        hasShadow: false,
        countries: [],
    });
    Ukraine.save({
        ribbon: 'BOTTOM_LEFT',
        hasShadow: true,
        countries: [],
    });
    Ukraine.save({
        ribbon: 'BOTTOM_RIGHT',
        hasShadow: false,
        countries: [],
    });
</script>

Or use other method of installation see below.

📲 How to include on your page?

There are several ways how to add this to your page:

📔 Via HTML script tag

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/main.js" integrity="sha384-Xn1RAG80M8PZlBQh3r8fUvHY7c8RtuplSnqXOkdJyCxqRsToRwJ1m2FP7vyJo7u/" crossorigin="anonymous"></script>
<script>
    Ukraine.save();
</script>

Note: Normally you would include async and defer keywords in the script element. But in this situation we do not want to defer this miniscript.

📗 Wordpress

Install Simple Custom CSS and JS WordPress plugin and add the following code as the Custom HTML:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/main.js" integrity="sha384-Xn1RAG80M8PZlBQh3r8fUvHY7c8RtuplSnqXOkdJyCxqRsToRwJ1m2FP7vyJo7u/" crossorigin="anonymous"></script>
<script>
    Ukraine.save();
</script>

📘 Import into the bundle

First, you need to install save-ukraine package from NPM:

npm i save-ukraine

And then use:

import Ukraine from 'save-ukraine';

Ukraine.save();

Note: This library is written in TypeScript so options are fully typed.

⚛️ React

First, you need to install save-ukraine package from NPM:

npm i save-ukraine

And then use:

import Ukraine from 'save-ukraine';

ReactDOM.render(
    <>
        <div
            ref={(element) => {
                if (!element) {
                    return;
                }
                Ukraine.save({ element, ...props });
            }}
        />
        {/*...Here will be rest of your app...*/}
    </>,
    document.getElementById('root'),
);

Or you can make full component:

// SaveUkraine.tsx

import * as React from 'react';
import Ukraine, { IUkraineOptions } from 'save-ukraine';

export function SaveUkraine(props: Partial<Omit<IUkraineOptions, 'element'>>) {
    return (
        <div
            ref={(element) => {
                if (!element) {
                    return;
                }
                Ukraine.save({ element, ...props });
            }}
        />
    );
}

And use it:

import { SaveUkraine } from './SaveUkraine';

ReactDOM.render(
    <>
        <SaveUkraine isCancelable={true} />
        {/*...Here will be rest of your app...*/}
    </>,
    document.getElementById('root'),
);

🛠🧩 Other customization

You can customize what will be shown. Here are all the options. If you have some idea feel free to contribute via pull request.

Ukraine.save({
    text: 'Stop the war with <b>Ukraine</b>',
    countries: [/* Russia and Belarus */ 'ru', 'by'],
    moreInfoUrl: `https://github.com/hejny/Ukraine`,
    ribbon: 'TOP_LEFT',
    isInConsole: true,
    isBloodIncluded: true,
    isGraphicIncluded: true,
    isCancelable: true,
});

👨🏽‍💻 Security

When you import anything (not only this script) on your page, please do not trust the publisher. Verify the code and include only the specific version not the wildcard of every future version.

✉️ Motivation

As a libertarian and programmer, I would never think that I would someday work on a piece of software that would go against free access to any service from any corner of the world.

But unfortunately, the situation has changed.

Ukraine was attacked by Russia and a lot of innocent children, women and men are now dying in Kyiv and other Ukrainian cities at the hands of one cruel dictator.

This can not be tolerated in 21. century in Europe.

We can not just close our eyes and just provide all services and benefits to the Russian economy which can keep killing innocent people.

If you are managing some website, please stop it for Russia until the war will be over and putin overthrown.

I don't want to punish the Russian people as a whole. As a citizen of Prague, I have few Russian friends and this definitely won't change. I believe most Russians do not support the politics of their state and especially this cruel war. But unfortunately, economic pressure is now one of the less bad solutions. And every ruble paid on taxes for the current Russian government means more money for killing innocent people.

I have created a simple way how to do it.

For the users from other places, nothing happens or 🟦 you can optionally place the ribbon with Ukraine flag 🟨. The script is tiny to load and insignificant. If the visitor is from Russia or Belarus (detected by system language) this message will appear:

📛 Make 3D printed bagge

https://www.thingiverse.com/thing:5326034

⁉️ FAQ

Few most common things aggregated from your questions:

How do you detect whether the user is or isn't from Russia.

We are capturing navigator.language from the browser. Full implementation is here.

How do you block the page?

I am putting a fixed full-screen div with a big z-index + restricting overflow and pointer-events for the rest of the page.

This restriction can be easily avoided!

Yes and no. For litter more skilled user on the desktop, it can be. For most of the users not. They can also switch their language but my goal is not to be bulletproof 100% blocking. But just to show this important message for Russian citizens.

This will also restrict Russian-speaking people from Ukraine?

Unfortunately, probably yes. Please do not place this for some essential services for Ukrainian people which can help them survive the war, like news, instructions, maps, ... There is no way how to perfectly detect who the user is and there will be always false positives and false negatives.

But if you have some better solution for this issue, please share with me.

It makes no sense to block western information from Russian people!

Definitely! If you are maintaining news and telling truth about the war / putin, please do not block it for the Russian people. This tool should be used as part of economic and social sanctions to Russia but made from the bottom. So, if you have some professional tool, some war/politics unrelated topic, unrelated blog, e-shop, crypto tool... you can use it as your personal economic sanctions.

Not to punish Russian people but to increase the efficiency of economic sanctions and help to get rid of the current Kremlin regime.

Can I change this and that?

Definitely! Please make a pull request.