fontIconPicker / react-fonticonpicker

React FontIconPicker Component to pick icon or SVG from a selection.
https://fonticonpicker.github.io/react-fonticonpicker/
MIT License
31 stars 32 forks source link

Built In Support for Promise based source #2

Open swashata opened 6 years ago

swashata commented 6 years ago

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.

  1. Display a loading status on placeholder and dropdown while waiting for the promise to resolve.
  2. Once done, set the icons and search.
  3. Children components should be able to pick it up.

This also means some changes in the structure:

  1. Instead of relying on icons and search as props, we need to set state within FontIconPicker component.
  2. If it is not a promise, then simply init. Set internal state sourceStatus to "done".
  3. If it is a promise, then set state sourceInit to "waiting" and resolve the promise. When resolved, set sourceInit to "done". On error set sourceStatus to "error".
  4. 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} />;
swashata commented 5 years ago

Maybe with react suspense, it would be more feasible.