Installation and usage

The easiest way to use question-bank-ilife is to install it from npm

npm i question-bank-ilife --save

Or

yarn add question-bank-ilife

Import the component in React Application

import the component in the App.js file

import { applyPolyfills, defineCustomElements } from 'question-bank-ilife/loader';

Consume the component

Initialize components in App.js

import React, { useEffect } from 'react';
import { applyPolyfills, defineCustomElements } from 'question-bank-ilife/loader';

function App() {
  useEffect(() => {
    applyPolyfills().then(() => {
      defineCustomElements();
    });
  }, []);

  return <div className="App">...</div>;
}

export default App;

Using component

Now The components should then be available in any of the React Application

You can use it

<question-bank client="" api-base-url="" application-id="" user-id="" form-id="" />

Props

Common props you want to specify include:

• client - specify client name (to add which client we are using) this prifix we are using for base html class name for customize the question-bank component styles

• api-base-url - base url to get the quesion bank data

• application-id - application id is unique identification for client

• user-id - user id is unique identification for user

• form-id - form id is unique identification for form data

• is-form-validation - if the value is true to check require field validation for the form

• single-form - if the value is true we show single form (or) we can avoid the props to render step form

customize your component style

let's say guardian is client using this component so in client we added 'guardian'

<question-bank client="guardian" api-base-url="" application-id="" user-id="" form-id="" />

base class we add the client prifix as guardian, from this class we can add our custorm style

<div class="question-bank question-bank--guardian">...</div>

• question-bank - existing base class
• question-bank--guardian - we can extend or update you custom style with this class

write your own custom style from this base class "question-bank--guardian"

.question-bank--guardian {
  background-color: blue;
}