Select Icon is a React UI part that gives a simple and customizable approach to choose icons from a group. It comes with numerous options like animation, JSON information-pushed updating, grid format, and overlay coloration. The part is designed to be simple to make use of and combine into any React software.
Options:
– Simple to make use of
– Designed for React functions
– Helps each JSX and TypeScript variations
– Customizable
– JSON information-pushed updating
– Animation help
– Grid format
Observe:
– This part requires React model 16.8 or larger.
– The icons needs to be offered as an array of objects, the place every object ought to have an id and an icon URL.
– The onSelect operate known as every time an icon is chosen, and it receives the id of the chosen icon as a parameter.
Package deal Contains:
– Information.pdf
– /instance-information/App.js
– /instance-information/property/*.png
– /instance-information/ozden/react-ui-choose-icon/SelectIcon.jsx
– /instance-information/ozden/react-ui-choose-icon/SelectIcon.tsx
– /instance-information/ozden/react-ui-choose-icon/SelectIcon.css
– /instance-information/ozden/react-ui-choose-icon/SelectIcon/arrow.svg
Primary Code Instance:
import SelectIcon from './ozden/react-ui-choose-icon/SelectIcon.jsx';
const [icons, setIcons] = useState([
{ id: "1", iconFile: images['./cat1.png'], title:"Tree" },
{ id: "2", iconFile: pictures['./cat2.png'], title: "" },
{ id: "3", iconFile: pictures['./cat3.png'], title: "Paris" },
]);
operate App() {
const handleSelect = (id) => {
console.log(`Chosen icon id: ${id}`);
}
return (
<SelectIcon
icons={icons}
selectedId="1"
onSelect={handleSelect}
/>
);
}
