Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/1egoman/funnies
:stuck_out_tongue_winking_eye: Make users laugh when your app loads.
https://github.com/1egoman/funnies
Last synced: 23 days 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-11-08T07:12:39.866Z (about 1 month ago)
- Language: JavaScript
- Homepage: https://1egoman.github.io/funnies/
- Size: 6.35 MB
- Stars: 178
- 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
[](https://travis-ci.org/1egoman/funnies)
[](https://david-dm.org/1egoman/funnies)
[](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
```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.