/slackers

Cute little pages for dead ends.

Primary LanguageJavaScript

Slackers

Slackers are simple amusing pages to use as placeholders with no effort.

The pages are valid components for preact.

there is also a demo.

What is it good for?

well, you can use them for any purpose really. I use them as placeholders for dark corners of my SPA where in normal case you should never get to but its in-fact possible. For example:

when using react-router or so.. a catch all page ('*') can take not-found.

Or when an evil user navigates manually to authenticated user area only (unauthorized)

Usage

Install using npm

npm i -S slackers 

Simple render

import NotFound from 'slackers/not-found';
// or
var NotFound = require('slackers/not-found');

render(h(NotFound), target)

Change text:

render(h(NotFound, {
    text: "This page doesn't exist"
  }), target)

Change icon:

import Base from 'slackers/base'

let backgroundImage = '' // path or base64 content (using webpack require for example)

render(h(Base, {
    backgroundImage,
    text: "My custom text"
}), target)

As standalone script (not recommended)

<script src="https://unpkg.com/slackers/standalone/slackers_not-found.js"></script>
<script>
  var NotFound = window['slackers_not-found'];
</script>

Example

import {render, h} from 'preact';
import NotFound from 'slackers/not-found';
render(h(NotFound), target)

Will render:

not-found

Current list of available slackers

  • not-found
  • unauthorized
  • error
  • maintenance
  • loader (animated)
  • loader-gears (animated)

Credits