Using Keyboard component in Lighting 3 - Blits App

Get Help
1

Hi guys, I’m struggling with the implementation of the Keyboard component from the @lightningjs/ui package. Is it even possible to use components from Lightning v2 in a Blits app?

Here is my code:

// file components/KeyboardTest.js
import Blits from '@lightningjs/blits'
import { Keyboard } from '@lightningjs/ui'

export default Blits.Component('KeyboardTest', {
  components: {
    Keyboard,
  },
  template: `
    <Element>
      <Keyboard ref="keyboard" x="50" y="50" />
    </Element>
  `,
  hooks: {
    ready() {
      const keyboard = this.select('keyboard')
      keyboard.on('input', (input) => {
        console.log('Keyboard input:', input)
      })
      keyboard.on('enter', () => {
        console.log('Keyboard input finalized')
      })
    },
  },
  methods: {
    openKeyboard() {
      const keyboard = this.select('keyboard')
      keyboard.visible = true
      keyboard.start()
    },
    closeKeyboard() {
      const keyboard = this.select('keyboard')
      keyboard.visible = false
      keyboard.stop()
    },
  },
  input: {
    enter() {
      const keyboard = this.select('keyboard')
      if (keyboard.visible) {
        this.closeKeyboard()
      } else {
        this.openKeyboard()
      }
    },
  },
})
2

Hi @martino777, the @lightningjs/ui package you mention is a Lightning 2 based library. And Blits is the App dev framework created as part of the Lightning 3.0 project.

So unfortunately the 2 are not compatible at the moment.

3

Thank you, @michiel, for letting me know.