Singul Frontend Library

Table of Contents

• Installation
• Framework Integration
  • React
  • Nextjs
  • Vue
• Component Properties
• Events
• Styling Options
• Troubleshooting

Installation

First, install the package in your project:

npm install @singulio/singul

or

yarn add @singulio/singul

Framework Integration

React Integration

import { SingulJS } from '@singulio/singul/react';

const AUTH_TOKEN = 'replace-with-your-token';
const CUSTOM_STYLES = { container: { width: '400px' } };

export default function App() {

  return (
    <section>
      <h1>Singul Search</h1>
      <SingulJS
        authToken={AUTH_TOKEN}
        placeholder="Your placeholder.."
        customStyles={CUSTOM_STYLES}
      />
    </section>
  );
}

Nextjs Integration

import { SingulJS } from '@singulio/singul/react';

const AUTH_TOKEN = 'replace-with-your-token';
const CUSTOM_STYLES = { container: { width: '400px' } };

export default function page() {

  return (
    <section>
      <h1>Singul Search</h1>
      <SingulJS
        authToken={AUTH_TOKEN}
        placeholder="Your placeholder.."
        customStyles={CUSTOM_STYLES}
      />
    </section>
  );
}

Vue Integration

<template>
      <SingulJS
        authToken="dasd"
        placeholder="Search apps..."
        :customStyles="{ input: { width: '4000px' } }"
        @appSelected="handleAppSelected"
      />
</template>

<script>
import { SingulJS } from '@singulio/singul/vue';

export default {
  name: 'HelloWorld',
  props: { msg: String },
  components: { SingulJS },
  methods: {
    handleAppSelected(detail) {
      console.log('selected app', detail);
    },
  },
};
</script>