https://github.com/1egoman/funnies

:stuck_out_tongue_winking_eye: Make users laugh when your app loads.
https://github.com/1egoman/funnies

Last synced: 3 months ago
JSON representation

:stuck_out_tongue_winking_eye: Make users laugh when your app loads.

• Host: GitHub
• URL: https://github.com/1egoman/funnies
• Owner: 1egoman
• License: mit
• Created: 2016-06-16T15:02:22.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-09-23T13:12:09.000Z (about 1 year ago)
• Last Synced: 2024-07-18T15:31:05.228Z (4 months ago)
• Language: JavaScript
• Homepage: https://1egoman.github.io/funnies/
• Size: 6.35 MB
• Stars: 177
• Watchers: 4
• Forks: 54
• Open Issues: 29
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• stars - 1egoman/funnies - :stuck_out_tongue_winking_eye: Make users laugh when your app loads. (JavaScript)

README

        
[![Travis build status](http://img.shields.io/travis/1egoman/funnies.svg?style=flat)](https://travis-ci.org/1egoman/funnies)

[![Dependency Status](https://david-dm.org/1egoman/funnies.svg)](https://david-dm.org/1egoman/funnies)

[![devDependency Status](https://david-dm.org/1egoman/funnies/dev-status.svg)](https://david-dm.org/1egoman/funnies#info=devDependencies)



# Funnies

A flexible way to add funny loading messages to webapps with optional react support.

# Examples and Demo

As of funnies `1.2.0`, funnies ships with examples. Take a look at

https://1egoman.github.io/funnies/ or build them locally by cloning down this repository, then

running `npm install && gulp example`. This will start up a local server on port 8080.







# Usage

## Javascript

```javascript

import Funnies from 'funnies';

let funnies = new Funnies();

funnies.message(); // "Reticulating Splines..."

funnies.message(); // "Generating witty dialog..."

funnies.message(); // "Go ahead -- hold your breath!"

```

## React Component

![React rendering](https://raw.githubusercontent.com/1egoman/funnies/master/assets/normal-react.gif)

```jsx

import {FunniesComponent} from 'funnies';

ReactDOM.render(, node);

ReactDOM.render(, node); // a new message every second

ReactDOM.render(, node); // Add a few of your own messages

```

### React Styles

Here's some css to properly animate funnies in the react component. Totally not required!

```css

.funnies-text {

  transition: opacity 250ms ease-in-out;

}

.funnies-text.funnies-enter {

  opacity: 0;

}

.funnies-text.funnies-enter-active {

  opacity: 0;

}

.funnies-text.funnies-leave {

  display: none;

}

.funnies-text.funnies-leave-active {

  opacity: 0;

}

```

## jQuery

Odan wrote a great [jQuery plugin](https://github.com/odan/funnies-jquery-plugin) for Funnies!

```javascript

import $ from 'jquery';

// (include js/jquery.funnies.js)

$('element').funnies();

```

# Troubleshooting/FAQ

- **Does this work in both the client and server-side?**

  Yes. Either include `dist/funnies.min.js` within your page and use `window.Funnies`, or use node/browserify/webpack to require the module.

- **Can I return a funny message within preformatted HTML?**

  Yes, try `funnies.messageHTML()`.

- **I want to add a funny message!**

  Create a fork, add your message to `src/funnies.js`, then create a pull

  request.

- **Something isn't working properly.**

  - Send me a tweet `@rgausnet` and I'll help you out asap.

  - Use Github's issue tracker.

# Areas to improve

- Angular bindings would be great.