How to use @instructure/uid - 10 common examples

get tabIds () {
    // cache tab ids for better performance and to prevent errors with animations
    const ids = this._tabIds || []
    let diff = ids.length - this.tabs.length

    while (diff++ < 0) {
      ids.push(uid('Tab'))
    }

    this._tabIds = ids

    return ids
  }

}

  mediaPlayerWrapper = null
  videoWrapper = null
  video = null
  state = {
    videoState: PAUSED,
    screenState: WINDOWED_SCREEN,
    muted: false,
    volume: 1,
    playbackSpeed: 1,
    loadingSrc: true,
    selectedSrc: this.getSourceFromProps(),
    sources: this.props.sources,
    showControls: true,
    videoId: uid('VideoPlayer')
  }

  componentDidMount () {
    this._registerEventHandlers()
  }

  componentWillUnmount () {
    screenfull.off('change', this.updateScreenState)
    MEDIA_ELEMENT_EVENTS.forEach((evt) => {
      this.video.removeEventListener(evt, this.getDerivedStateFromVideoProps)
    })
    // remove the video ref and stop applying video props
    this.video = null
    this.videoWrapper = null
    this.mediaPlayerWrapper = null
  }

get tabIds () {
    // cache tab ids for better performance and to prevent errors with animations
    const ids = this._tabIds || []
    let diff = ids.length - this.tabs.length

    while (diff++ < 0) {
      ids.push(uid('Tab'))
    }

    this._tabIds = ids

    return ids
  }

get tabIds () {
    // cache tab ids for better performance and to prevent errors with animations
    const ids = this._tabIds || []
    let diff = ids.length - this.tabs.length

    while (diff++ < 0) {
      ids.push(uid('Tab'))
    }

    this._tabIds = ids

    return ids
  }

createScreenreaderAlert () {
    const liveRegion = this.getLiveRegion()
    if (liveRegion) {
      this.srid = uid('Alert')

      const div = document.createElement('div')
      div.setAttribute('id', this.srid)

      const content = this.createScreenreaderContentNode()
      ReactDOM.render(content, div)
      liveRegion.appendChild(div)
    }
  }

constructor (props) {
    super()
    this._id = uid('CodeEditor')

    if (typeof props.value === 'undefined') {
      this.state = {
        value: props.defaultValue
      }
    }
  }

constructor () {
    super()

    this.titleId = uid('InlineSVG-title')
    this.descId = uid('InlineSVG-desc')
  }

constructor (props) {
    super(props)

    this.defaultId = uid('FileDrop')
    this.messagesId = uid('FileDrop-messages')
  }

constructor (props) {
    super(props)

    this.state = {
      focus: false,
      highlightedIndex: this.getSelectedIndex(props),
      expanded: false,
      positioned: false
    }

    this._defaultId = uid('Select')
    this._optionsId = uid('Select-Options')
    this._assistId = uid('Select-assistiveText')
  }

constructor () {
    super()

    this.titleId = uid('InlineSVG-title')
    this.descId = uid('InlineSVG-desc')
  }