1.0.1 • Published 10 months ago
question-bank-ilife v1.0.1
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 stylesapi-base-url
- base url to get the quesion bank dataapplication-id
- application id is unique identification for clientuser-id
- user id is unique identification for userform-id
- form id is unique identification for form datais-form-validation
- if the value is true to check require field validation for the formsingle-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 classquestion-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;
}