React component

[svinkle]

Looking for help with creating a React component for Launchy! 🚀

Ideally, someone should be able to get the script via npm and then import Launchy from 'Launchy'; in the App.js file. I'm not sure what's involved with something like this.

Any tips or even a PR would be great! 😀

[Aidurber]

Sounds like a fun one, I'll take a look.

[svinkle]

Amazing! Thanks, @Aidurber.

[Aidurber]

Hi @svinkle , I'm a little unsure how the React component would work, and how beneficial it would be.

Since Launchy initialises on DOMContentLoaded, I would have remove that event to initialise inside componentDidMount which would be a breaking change. When I've dabbled with creating components from old jQuery plugins I follow this guide [React:Integrating with Other Libraries](https://reactjs.org/docs/integrating-with-other-libraries.html

Going back to the issue:

Ideally, someone should be able to get the script via npm and then import Launchy from 'Launchy'; in the App.js file. I'm not sure what's involved with something like this.

Using import 'launchy-modal-window/launchy'; is enough to get Launchy working. At least with Webpack anyway.

What I'm trying to say is, with how Launchy is currently structured, I don't believe it would be beneficial as a React component.

Sorry to disappoint @svinkle , I think this is beyond my skillset/time allowance 😞

[svinkle]

@Aidurber thank you so much for looking into this!

So, just to confirm, if someone grabbed Launchy via npm and then import 'launchy-modal-window/launchy'; it would work as a result of DOMContentLoaded? If that's the case, then I think you're right; perhaps this doesn't need to have anything done to it.

I guess I'll try this out and see what happens in a new React app. I just assumed that there was more to it to get it working. TBH, using things like import and export etc are quite new to me.

Thanks again! I really appreciate your time today! 👍

[Aidurber]

@svinkle Not a problem 😄 Yes, I booted up a new create-react-app to test it out.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import 'launchy-modal-window/launchy';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div data-launchy="I like 🌮" data-launchy-text="Launchy! 🚀" data-launchy-title="Boom! 💥">
          <p>This modal window is fully accessible!</p>
          <p>Notice when you <code>Tab</code> or <code>Shift+Tab</code>, keyboard focus remains within the modal window. 💪</p>
          <p>To close the window press <code>Esc</code>, click the close button, or the modal overlay. Up to you, really.</p>
          <hr />
          <ul>
            <li>Check the project code on <a href="https://github.com/svinkle/launchy">GitHub</a>.</li>
            <li>Made with 💖 by <a href="https://twitter.com/svinkle">@svinkle</a>.</li>
          </ul>
          <a href="#" class="launchy__custom-control" data-launchy-close="🔥">Ok! 👍</a>
        </div>
      </div>
    );
  }
}

export default App;

It worked first time, one possible change would be to rename the file in the npm output to "index.js" and I think you could just do import 'launchy-modal-window' instead of import 'launchy-modal-window/launchy'

Again, it's not a problem, a cool t-shirt is enough to motivate me into action 😁. I've had fun looking through so much code today, I think I may make it a regular occurrence.

[svinkle]

Ah, that's a good idea, changing the name to index.js.

So, I just imported into a current project I have and it does work on initial page load! Problem I'm seeing though is when using the router to move about in the app. When the page view loads via React router, the modal window launcher and content is not being dynamically generated as it does with a browser reload. I assume I may need to add something in order for things to properly load and unload on componentDidMount() etc.

I'll have a think about this, but this is a great first step in the process! 🙂

[Aidurber]

Hmm

1. An event listener could be added to Launchy to teardown and re-init and that could be triggered in the onChange handler of react-router: <Route path="/" onChange={yourHandler}
2. Possibly remove the DOMContentLoaded event to initialise Launchy, which would be a breaking change.

How I was going to do the React component was to create a separate file called launchy.react.js which exported the component. I've just been dabbling but I've hit a wall with all of the webpack stuff, it's an area I really need to get better at.

How I think it could work would be:

index.js

import Lauchy from './launchy';
import LauchyReact from './launchy.react';

export {
  Lauchy,
  LauchyReact
}

In the latter part of launchy.js launchy.js

export const init = () => {
  // init implementation
  // ...
  }
};

document.addEventListener('DOMContentLoaded', init, false);
export default Launchy;

We export const init = () => so we can grab that separately, and export default Launchy so it works as it currently does.

launchy.react.js Since we exported init in launchy.js we can use it independently in componentDidMount

import React, { Component } from 'react';
import LaunchyCore, { init } from './launchy';

class Launchy extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    init();
  }
  render() {
    const { children, text, title } = this.props;
    return (<div data-launchy data-launchy-text={text} data-launchy-title={title}>
              {children}
          </div>
    )
  }
}

export default Launchy;

That's how I think it will work but I can't get the webpack config right. 😞

In webpack.config I guess we'd create 2 entry points:

  entry: {
      launchy: './src/launchy.js',
      'launchy.react': './src/launchy.react.js',
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist',
        library: 'Launchy'
    },

That's the extent of my skillset I'm afraid! Off to read some react component library source to try and figure out webpack configs. 😂

[gokulanv]

Hi @svinkle , If this issue is still open, I would like to work on it.

[svinkle]

@gokul0 Thanks! Yep, it's still open. Go for it!

You may also want to chat with @rghattas as she had some ideas to help with this. 👍