---
title: Ranking Question with Custom Item Template
product: Form Library
description: Ranking question ships with fully customizable choice items. You can add images and descriptions, align text, change fonts - you name it. View a free demo example for JavaScript to learn more.
framework: React
source: https://surveyjs.io/form-library/examples/ranking-with-custom-items/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Ranking Question with Custom Item Template (React)

Ranking questions ask respondents to order an item list according to their preferences. If you want to customize the appearance of list items, enhance item styling, or create complex item layouts, you can implement a custom item template. This demo shows how a custom template can be used to add icons to ranking items.

To create a custom item template, follow the steps below:

1. Implement a component that renders item markup.          
    The component accepts the item configuration object as a prop. You can use its `value` and `text` properties to access the item's value to be saved in survey results and display text.

2. Register the component so that it can be accessed by name.          
    In HTML/CSS/JavaScript projects, register the component in `ReactElementFactory` as shown in the `index.js` file.           
    In React, register the component in `ReactElementFactory` as shown in the `SurveyComponent.jsx` file.          
    In Angular, register the component in `AngularComponentFactory` as shown in the `survey.component.ts` file.          
    In Vue.js, use [techniques native to this framework](https://vuejs.org/guide/components/registration).

3. Assign the component name to the Ranking question's [`itemComponent`](https://surveyjs.io/form-library/documentation/api-reference/ranking-question-model#itemComponent) property in the survey JSON schema.

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/SurveyComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";
import { ReactElementFactory, SurveyElementBase } from "survey-react-ui";
import { Component } from "react";


class RankingItemTemplateComponent extends Component {
    getImageUrl (itemTitle) {
        return "https://www.carlogos.org/car-logos/" + itemTitle.toLowerCase() + "-logo.png";
    }
    render() {        
        const item = this.props.item;
        const locText = item.locText;
        const imageUrl = this.getImageUrl(item.title);
        return (
            <div className="sv-ranking-item__text">                
                <img className="ranking-item__image" src={imageUrl} alt="Logo" />
                {SurveyElementBase.renderLocString(locText)}
            </div>
        );
    }
}
ReactElementFactory.Instance.registerElement("ranking-item-template", (props) => {
    return React.createElement(RankingItemTemplateComponent, props);
});
function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    return (<Survey model={survey} />);
}

export default SurveyComponent;
```

### `src/index.css`

```css
.ranking-item__image {
    height: 24px;
    vertical-align: middle;
    margin-right: 8px;
}
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyComponent from "./SurveyComponent";

const root = createRoot(document.getElementById("surveyElement"));
root.render(<SurveyComponent />);
```

### `src/json.js`

```js
export const json = {
  "elements": [
    {
      "type": "ranking",
      "name": "cars",
      "title": "Please rank these car brands in order of preference",
      "itemComponent": "ranking-item-template",
      "choices": [
        "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi",
        "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen"
      ]
    }
  ]
};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "babel": "latest",
    "survey-core": "latest",
    "survey-react-ui": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/ranking-with-custom-items/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/ranking-with-custom-items/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/ranking-with-custom-items/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/ranking-with-custom-items/vanillajs.md)