react-fonticonpicker
react-fonticonpicker copied to clipboard
Built In Support for Promise based source
The source of icons and search can be a promise which resolves to a valid JSON. We can accept that to have support for async source.
- Display a loading status on placeholder and dropdown while waiting for the promise to resolve.
- Once done, set the icons and search.
- Children components should be able to pick it up.
This also means some changes in the structure:
- Instead of relying on icons and search as props, we need to set state within
FontIconPickercomponent. - If it is not a promise, then simply init. Set internal state
sourceStatusto"done". - If it is a promise, then set state
sourceInitto"waiting"and resolve the promise. When resolved, setsourceInitto"done". On error setsourceStatusto "error". - Child component will pick it up from the state and will show appropriate message and UI.
API blob
const icons = fetch('https://gist.githubusercontent.com/swashata/c0db916b33700c91ab75f59d4aeba7d3/raw/366789b2d001a99f5f41f1ceab980d991de059c3/fontawesome-icons-with-categories.json')
.then(data => data.json());
return <FontIconPicker icons={icons} />;
Maybe with react suspense, it would be more feasible.