Consider supporting custom react component?

[f0rr0]

Currently, I believe everything's hardcoded in the React component.

[1egoman]

Hello @f0rr0!

All the messages are hardcoded here: https://github.com/1egoman/funnies/blob/master/src/funnies.js

If you want to use custom messages you should be able to do something like:

import {FunniesComponent} from 'funnies';
<FunniesComponent customMessages={["You're too funny", "Thinking really hard..."]} />

Keep in mind this will only use those two messages and not append to what is already there.

If you have any more funny messages, consider contributing them as a pull request!

If I'm misunderstanding your question, feel free to elaborate.

Thanks!

[f0rr0]

Hey @1egoman! Great work. What I meant was, currently, the component renders a <h1>Loading</h1> and some, other markup along with loading messages. That is too inflexible for everyone's use case. Maybe, you could just wrap the messages in CSSTransitionGroup with prop component=span (or div etc.) and a user supplied className. That way one can add custom styles etc. and use custom wrapping markup.

[1egoman]

@f0rr0 Sorry I misunderstood what you asked before!

I like that pattern that you described a lot. I don't currently have time to dive into this myself, but if you want to update and make a pull request, then I'll merge it in. The only thing I'd ask is to try and maintain backwards compatibility, but if you can't, no big deal.

As a stop-gap measure or if you don't have the time to PR, you could write your own small component that extends the component I've written with a custom render function. (below is untested, but should get the idea across)

import {FunniesComponent} from 'funnies';
class MyCustomFunniesComponent extends FunniesComponent {
  render() {
    return <div className="funnies funnies-custom">
      <span>Here's a funny loading message: {this.state.message}</span>
    </div>;
  }
}

[f0rr0]

Hey @1egoman! I moved to a completely custom solution (borrowed your funny messages though!)
However, I'll take this up when I have a little more time. You could also look into using webpack or rollup to reduce the bundle size. I think the current set up includes the entire radium dist. That's not apt for a component that just shows funny messages IMO.

[1egoman]

I don't have time to jump into this right now, though I'm pretty sure it's a trivial task. I'd love for someone to take this on!

Task copied from above:

You could just wrap the messages in CSSTransitionGroup with prop component=span (or div etc.) and a user supplied className. That way one can add custom styles etc. and use custom wrapping markup.