Select Page

DEMO : http://jsbin.com/jahelod/edit?output

Ini adalah sample, tentang bagaimana kita menggunakan jQuery lib (dalam case ini Bootstrap modal) sebagai component React. Berhubung pada saat postingan ini ditulis Bootstrap 4 masih versi alpha. Dan belum ada Bootstrap 4 React component yang mature. Maka kita coba implementasi sendiri.

Penggunaan Modal Component:

<Modal show={this.state.showModal} onHide={() => this.state.showModal = false}>
  <div key='modalTitle'>
    REACT + JQUERY
  </div>
  <div key='modalBody'>                     
    {this.state.time && this.state.time.toString()}
  </div>
  <div key='modalFooter'>
    <a href='https://mantapweb.com'>MantapWeb</a>
  </div>
</Modal>

Implementasi:

class Modal extends React.Component {
  componentDidMount() {
    $(this.refs.modal).on('hidden.bs.modal', () => {
      this.show = false;
      this.props.onHide();
      $('.modal-backdrop').detach();
    })
  }

  componentWillReceiveProps(props) {
    if (props.show && this.show !== true) {
      this.show = true;
      $(this.refs.modal).modal('show').detach().appendTo(document.body)

    } else if (!props.show && this.show !== false) {
      this.show = false;
      $(this.refs.modal).modal('hide');
    }
  }

  render() {
    const modalTitle = this.props.children.find(child => child.key === 'modalTitle');
    const modalBody = this.props.children.find(child => child.key === 'modalBody');
    const modalFooter = this.props.children.find(child => child.key === 'modalFooter');
    return (
      <div ref="modal" className="modal fade">
        <div className="modal-dialog" role="document">
          <div className="modal-content text-muted">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close">                          <span aria-hidden="true">×</span>
              </button>
              <h4 className="modal-title">{modalTitle}</h4>
            </div>
            <div className="modal-body">{modalBody}</div>
            <div className="modal-footer">{modalFooter}</div>
          </div>
        </div>
      </div>
    )
  }
}

Bagaimana? Ternyata tak terlalu sulitkan 🙂

Banyak yang bilang bahwa terlarang menggunakan jQuery ketika kita menggunakan React.

Tapi menurut saya sah-sah saja. Salah satu alasannya karena ada beberapa library jQuery yang belum diport ke React. Dan kita sebagai programmer kadang ingin menggunakan libs tersebut, karena tidak ada alternative lain. Cara simplenya implement sendiri saja.

React punya hooks yang bisa kita manfaatkan untuk interop dengan jQuery. Salah satunya adalah componentDidMount. componentDidMount bisa kita manfaatkan untuk setup jQuery lib (More: https://facebook.github.io/react/docs/react-component.html#componentdidmount). Bisa diibaratkan ini seperti event load pada document.

Oya selain itu, ketika menggunakan React kita juga dianjurkan untuk tidak mutate state secara langsung.
Kode seperti ini this.state.someState = 'new state value' terlarang ketika kita menggunakan React. Tetapi ketika ingin interop dengan jQuery saya rasa sah-sah saja. Seperti pada sample diatas:

<Modal show={this.state.showModal} onHide={() => this.state.showModal = false}>

Pada saat onHide kita langsung mutate this.state.show. Ini saya rasa tidak masalah, karena tujuan kita di sini adalah untuk mengupdate statenya saja. Bukan untuk re-render modal tersebut.

Btw, ini semua pengecualian ya. Yang recommended itu tetaplah best practices yang ada di docsnya React.
Karena sekali lagi, pada masa transisi terkadang libs tersebut belum diport ke React. Dan dari pada menunggu, lebih baik kita implement sendiri 🙂

Bagaimana pendapat agan-agan? Silahkan comment di bawah 🙂

OK. Sekian dulu, nanti kalau sempat dilanjut lagi ya.

%d bloggers like this: