ianmartorell / meteor-accounts-ui-bootstrap-3

accounts-ui package with Bootstrap 3 and localization support
150 stars 109 forks source link

Usage with React/1.3/react-router #208

Open sys13 opened 8 years ago

sys13 commented 8 years ago

Here's what I've written so far that I haven't gotten working:

import { Blaze } from 'meteor/blaze'
import { Template } from 'meteor/templating'
import AccountsUI from 'meteor/ian:accounts-ui-bootstrap-3'
import React from 'react'
import ReactDOM from 'react-dom'

export default class AccountsUIWrapper extends React.Component {
  componentDidMount() {
    // Use Meteor Blaze to render login buttons
    this.view = Blaze.render(Template.loginButtons,
      ReactDOM.findDOMNode(this.refs.container))
  }
  componentWillUnmount() {
    // Clean up Blaze view
    Blaze.remove(this.view)
  }
  render() {
    return <span ref="container" />
  }
}

The problem seems to be with this part: Template.loginButtons and probably how I'm importing ian:accounts-ui-bootstrap-3. Any direction would be helpful.

sys13 commented 8 years ago

I then tried using Template._loginButtons and it would show up. Problem is, when I click on 'Create Account' it reloads the page.

jacobdr commented 8 years ago

I am getting an error "Cannot find module 'meteor/templating'", etc. when I try to mirror your above. Any suggestions?

import { Template } from 'meteor/templating'
import { Blaze } from 'meteor/blaze'
jacobdr commented 8 years ago

For anyone coming at this from Typescript, relevant conversation here

jacobdr commented 8 years ago

So now that I am getting my project to compile, I have the same issue as @sys13 , which I think has to do with the intersection of routing between Blaze/Accounts/React-Router (at least in my case). Will keep posted when a solution comes to bear.

sys13 commented 8 years ago

@jacobdr Yes, I think react-router is the problem. In fact, any links on my page that are not generated from <Link> lead to a page refresh.

scheung38 commented 8 years ago

I am also facing the same issue if loginButtons not displaying, so do we remove this package and go back to the acounts-ui package?

sscaff1 commented 8 years ago
import { Blaze } from 'meteor/blaze'
import { Template } from 'meteor/templating'
import AccountsUI from 'meteor/ian:accounts-ui-bootstrap-3'
import React from 'react'
import ReactDOM from 'react-dom'

export default class AccountsUIWrapper extends React.Component {
  componentDidMount() {
    // Use Meteor Blaze to render login buttons
    this.view = Blaze.render(Template._loginButtons,
      ReactDOM.findDOMNode(this.refs.container))
  }
  componentWillUnmount() {
    // Clean up Blaze view
    Blaze.remove(this.view)
  }
  render() {
    return <span ref="container" />
  }
}

In the source code it's defined as _loginButtons. So the above works if you just make that one change.