React example?

[christaggart]

Is anyone using hellojs with React/browserify? Importing the Hello module on it's own seems to work fine, but when importing the instagram module, it throws a "hello not defined" error on the last part of instagram.js. Would be a great addition to the docs.

    }
})(hello); <--- Uncaught ReferenceError: hello is not defined

Code is pretty straight forward.

import React from 'react';
import Hello from '../../js/vendor/hello/dist/hello';
import '../../js/vendor/hello/src/modules/instagram';

class InstagramExample extends React.Component {
    handleClick(){
        Hello('instagram').login();
    }

    componentDidMount(){
        Hello.init({
            instagram : 'my-ig-token'
        },{
            scope : 'photos',
            redirect_uri:'../redirect.html'
        });

    }

    render () {
        return (
            <div>
                <a href="#instagram" onClick={this.handleClick}>Sign in with Instagram</a>
        </div>
    );
    }
}

export default InstagramExample;

[MrSwitch]

So I bundle my own hello/dist files. It's a clunky step but you literally concat the files you need, see Gruntfile.js.

The scenario you've described is something I really want too.

FYI: hello-es6 branch will try to support your flow soon.

[MrSwitch]

Another suggestion, define window.hello...

import Hello from '../../js/vendor/hello/dist/hello';
window.hello = Hello;
import '../../js/vendor/hello/src/modules/instagram';
...

[gonzalovazquez]

I got a working version with React, it is not ideal but it works.

I downloaded the hello.js library and saved it in a vendor folder.

Next, created a .eslintignore and added the vendor file to the list.

This is what my LoginComponent looks like

import React, { Component } from 'react';
import hello from '../vendor/hello.all.js';

class LoginComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            user: []
        };
    }

    handleClick() {
        let self = this;
        hello('github').login(
            {
                scope: 'repo,user'
            }
        ).then(function() {
            return hello('github').api('me');
        })
        .then(function(p) {
            self.setState({user: p, open: false});
            console.log(self.state);
        });
    }
    
    componentDidMount(){
        hello.init({
            github : '<client-id>'
        },{
            scope : '<scopes>'
        });
    }
    render(){
        return(
        <div>
            <RaisedButton label="Authenticate with Github" onTouchTap={this.handleClick} />
        </div>
        )
    }
}

export default LoginComponent;

[bolicd]

I'm having issues trying to include hellojs as well. Im using isomorphic react application.

Basically if I try to do: import hello from '../vendor/hello.all.js'; im getting window not defined error.

The only way i've managed to get this work at the moment is to: let hello = require('hellojs');

inside componentDidMount() method, after DOM is rendered.

Anything im missing here?

[MrSwitch]

Yes, it's client side only so window object is expected and presumably unavailable when rendered isoporohically. Wrapping it in something which runs only in the client is the way to go.

[bolicd]

Understood thanks.

Currently I'm saving instance of hello on state as an object: componentDidMount() { console.log('AppNavigation mounted'); if (!this.state.hello) { this.setState({ hello: initHello(}); } }

this is done so I can use the same instance of the object elswhere in the component: let hello = this.state.hello;

However, this means that each time my componentDidMount is executed new instance will be added on the state. Is there any way to initHello once and reference it from there? (was thinking to serialize the object in the localstorage but it it unreliable)

[MrSwitch]

Maintains its own state. So you probably just want to wrap the whole helloInit into a module with a simple export hello at the end. So initiation is only done once.