Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace deprecated lifecycle hooks with new one. Add support for angular component with string paramters #41

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

alessandro308
Copy link

No description provided.

@marianyfs
Copy link

marianyfs commented Jun 9, 2021

with the merge of this MR will it be possible to use the Hooks?

https://reactjs.org/docs/hooks-intro.html

import React, { useState } from 'react'
import { react2angular } from 'react2angular'

export let Four = ({ four }) => {
  const [number, setNumber] = useState(four)
  return (
    <React.Fragment>
      <div>
        number: {number}
      </div>

      <button onClick={() => setNumber(number + 1)}> Plus </button>
    </ React.Fragment>
  )
}

export let FourAngular = react2angular(Four, ['four'])

Currently we do like this:

import React from 'react'
import { react2angular } from 'react2angular'

export class Four extends React.Component {
  constructor (props) {
    super(props)
    this.state = { number: props.four }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick () {
    this.setState(prevState => ({
      number: prevState.number + 1
    }))
  }

  render () {
    return (
      <div>
        <p>number: {this.state.number}</p>
        <button onClick={this.handleClick}> Plus </button>
      </div>
    )
  }
}

export let FourAngular = react2angular(Four, ['four'])

Based on https://github.com/bcherny/angular2react-demos/blob/master/multi-file/src/Four.jsx

@alessandro308
Copy link
Author

We are using hooks even with the code before this pull request. This PR, instead, replace the deprecated method of React in favour of the new method.

This lib, interally, uses React.createElement and it generate a React class component to render the Angular one. So, your question in case, is related to react2angular since the input here is an angular component.
In that case, for react2angular, we are using a version a bit modified to work with our version of AngularJS. If you want, give it a look: https://github.com/domotz/react2angular/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants