Customizing ADAC new client

This article aims to provide a few examples for customizing your implementation of ADAC. The latest version of the ADAC Javascript client is meant to be used in a front-end framework like Vue, or React. If you haven't installed the ADAC package just yet, please consult the README on our GitHub repository.

If you do not use a front-end framework, you can refer to this knowledge base article for customizing ADAC.

Examples

Plain example (Vue 3)

<template>
  <div class="container">
    <input v-model="domainInput" id="adac-js-domain-input" @input.prevent="onChangeDomainInput"/>
    <div style="display:flex;gap:1rem;justify-content:center;">
      <span v-for="category in categories">
        <input type="checkbox" :id="'form_' + category[1]" :value="category[0]" v-model="selectedCategories"
               @change="onChangeDomainInput"/>
        <label :for="'form_'+category[1]">{{category[1]}}</label>
      </span>
    </div>
    <div class="results" style="display: grid; grid-template-columns: 1fr 1fr">
      <div class="domain-results">
        <div v-for="result in results">
          {{result.domain_name}}
        </div>
      </div>
      <div class="domain-suggestions">
        <div v-for="suggestion in suggestions">
          {{suggestion.domain_name}}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import ADAC from '@realtimeregister/adac-api-client'
  import { debounce } from 'es-toolkit' // or write your own simple debounce function.
  import { ref } from 'vue'
  const domainInput = ref('')
  const selectedCategories = ref([])
  const results = ref([])
  const suggestions = ref([])
  const categories = ref([])
  const adac = ADAC.initialize('YOUR_API_KEY', {
        tldSetToken: 'YOUR_TLD_SET_TOKEN'
      }
  )
  adac.onCategories = (categoryResult) => categories.value = categoryResult
  adac.onDomainResult = (domainResult) => results.value.push(domainResult)
  adac.onSuggestion = (suggestionResult) => suggestions.value.push(suggestionResult)
  const onChangeDomainInput = debounce(() => {
    results.value = []
    suggestions.value = []
    adac.processInput(domainInput.value, selectedCategories.value)
  }, 300)
</script>

Bootstrap 5 with dropdown (Vue 3)

<div class="btn-group d-flex flex-wrap">  
    <h4>Check if your domain is available</h4>  
    <div class="adac-domain-container rounded-top align-items-center p-3 bg-dark text-white input-group">  
        <input type="text" class="form-control" id="adac-js-domain-input" autofocus  
               placeholder="Enter domain or keyword">  
        <span class="input-group-text">.com</span>  
    </div>
    <div id="adac-js-categories" class="categories bg-dark text-white d-flex w-100 m-0 p-3 px-4">
        <span v-for="category in categories">
        <input type="checkbox" :id="'form_' + category[1]" :value="category[0]" v-model="selectedCategories"
               @change="onChangeDomainInput"/>
        <label :for="'form_'+category[1]">{{category[1]}}</label>
      </span>
    </div>  
    <div class="dropdown-menu w-100 shadow-sm top-100 rounded-bottom" id="adac-results-dropdown">
        <div class="row">  
            <div class="domain-name-results-wrapper p-3 col-md-6 col-12">  
                <h4>Results</h4>  
                <div id="adac-js-domain-results" class="domain-results">
                    <div class="domain-result" v-for="domain in results">
                        {{ domain.domain_name }}
                    </div>
                </div>  
            </div>           
             <div class="suggestions-wrapper p-3 col-md-6 col-12">  
                <h4>Suggestions</h4>  
                <div id="adac-js-suggestions" class="suggestions">
                    <div v-for="suggestion in suggestions" class="suggestion">
                      {{suggestion.domain_name}}
                    </div>
                </div>  
            </div>        
        </div>   
     </div>
</div>
<script setup>
  import ADAC from '@realtimeregister/adac-api-client'
  import { debounce } from 'es-toolkit' // or write your own simple debounce function.
  import { ref } from 'vue'
  const domainInput = ref('')
  const selectedCategories = ref([])
  const results = ref([])
  const suggestions = ref([])
  const categories = ref([])
  const adac = ADAC.initialize('YOUR_API_KEY', {
        tldSetToken: 'YOUR_TLD_SET_TOKEN'
      }
  )
  adac.onCategories = (categoryResult) => categories.value = categoryResult
  adac.onDomainResult = (domainResult) => results.value.push(domainResult)
  adac.onSuggestion = (suggestionResult) => suggestions.value.push(suggestionResult)
  const onChangeDomainInput = debounce(() => {
    results.value = []
    suggestions.value = []
    adac.processInput(domainInput.value, selectedCategories.value)
  }, 300)
</script>