diff --git a/README.md b/README.md
index 02b2f1f..1766e65 100644
--- a/README.md
+++ b/README.md
@@ -646,6 +646,8 @@ classNames: {
If you want just extend a little original template then you may use `Choices.defaults.templates` to get access to
original template function.
+Templates receive the full Choices config as the first argument to any template, which allows you to conditionally display things based on the options specified.
+
**Example:**
```js
@@ -665,7 +667,7 @@ or more complex:
const example = new Choices(element, {
callbackOnCreateTemplates: function(template) {
return {
- item: (classNames, data) => {
+ item: ({ classNames }, data) => {
return template(`
;
+type TemplateOptions = Record<'classNames' | 'allowHTML', any>;
const templates = {
containerOuter(
- { classNames: { containerOuter } }: Options,
+ { classNames: { containerOuter } }: TemplateOptions,
dir: HTMLElement['dir'],
isSelectElement: boolean,
isSelectOneElement: boolean,
@@ -48,14 +46,14 @@ const templates = {
return div;
},
- containerInner({ classNames: { containerInner } }: Options): HTMLDivElement {
+ containerInner({ classNames: { containerInner } }: TemplateOptions): HTMLDivElement {
return Object.assign(document.createElement('div'), {
className: containerInner,
});
},
itemList(
- { classNames: { list, listSingle, listItems } }: Options,
+ { classNames: { list, listSingle, listItems } }: TemplateOptions,
isSelectOneElement: boolean,
): HTMLDivElement {
return Object.assign(document.createElement('div'), {
@@ -64,7 +62,7 @@ const templates = {
},
placeholder(
- { allowHTML, classNames: { placeholder } }: Options,
+ { allowHTML, classNames: { placeholder } }: TemplateOptions,
value: string,
): HTMLDivElement {
return Object.assign(document.createElement('div'), {
@@ -83,7 +81,7 @@ const templates = {
itemSelectable,
placeholder,
},
- }: Options,
+ }: TemplateOptions,
{
id,
value,
@@ -146,7 +144,7 @@ const templates = {
},
choiceList(
- { classNames: { list } }: Options,
+ { classNames: { list } }: TemplateOptions,
isSelectOneElement: boolean,
): HTMLDivElement {
const div = Object.assign(document.createElement('div'), {
@@ -162,7 +160,7 @@ const templates = {
},
choiceGroup(
- { allowHTML, classNames: { group, groupHeading, itemDisabled } }: Options,
+ { allowHTML, classNames: { group, groupHeading, itemDisabled } }: TemplateOptions,
{ id, value, disabled }: Group,
): HTMLDivElement {
const div = Object.assign(document.createElement('div'), {
@@ -202,7 +200,7 @@ const templates = {
itemDisabled,
placeholder,
},
- }: Options,
+ }: TemplateOptions,
{
id,
value,
@@ -251,7 +249,7 @@ const templates = {
},
input(
- { classNames: { input, inputCloned } }: Options,
+ { classNames: { input, inputCloned } }: TemplateOptions,
placeholderValue: string,
): HTMLInputElement {
const inp = Object.assign(document.createElement('input'), {
@@ -270,7 +268,7 @@ const templates = {
return inp;
},
- dropdown({ classNames: { list, listDropdown } }: Options): HTMLDivElement {
+ dropdown({ classNames: { list, listDropdown } }: TemplateOptions): HTMLDivElement {
const div = document.createElement('div');
div.classList.add(list, listDropdown);
@@ -283,7 +281,7 @@ const templates = {
{
allowHTML,
classNames: { item, itemChoice, noResults, noChoices },
- }: Options,
+ }: TemplateOptions,
innerText: string,
type: 'no-choices' | 'no-results' | '' = '',
): HTMLDivElement {