Having a list of recommended components

[Utzel-Butzel]

We just had a call with Laura and Maurizio, and our idea was to have list of reusable packages, where we only provide the related css.

My recommendation for these components would be:

• Tooltips: https://github.com/tvkhoa/react-tippy There is also a Vanilla JS version available
• Select/Autocomplete: https://jedwatson.github.io/react-select/
• Tables: https://github.com/react-tools/react-table
• Charts https://github.com/FormidableLabs/victory-chart Supports react native, very flexible

Shall we have some prefered libraries for common components like tooltips, tables, etc.?

[laurasilvani]

Thanks Robert for sharing this list. The goal is to have a set of libraries that should be used in our React apps whenever needed and they should be preferred over other libraries. When using some other libraries, for some other reasons, we must align their styling to our look and feel to ensure visual consistency. I am adding to the list:

• Redux: for state management http://redux.js.org/
• Redux Thunk: together with Redux, to dispatch async actions https://github.com/gaearon/redux-thunk
• Redux Forms: for forms management https://redux-form.com/7.0.4/
• React Datepicker: https://github.com/Hacker0x01/react-datepicker

[laurasilvani]

Regarding React Table library, the styling of the table itself is a piece of cake, while the pagination has to be rewritten with a custom component to be in line with the UI Kit look & file.

[redmoonlas]

Ok, but if we have a backend pagination management (and it always should be for performance reasons on a big items list) we will handle it with a separate component and leave to the table component only the responsibility of render a single page of items.

[Utzel-Butzel]

@laurasilvani I have a datatable.scss, which is based on the standard react-table styling to adapt the WFP UI Kit look and feel. @redmoonlas Yes, using server side data pagination management with react-table works nicely. https://react-table.js.org/#/story/server-side-data

[laurasilvani]

@Utzel-Butzel That is great, but the React Table pagination is missing the page counting, as it is in the kit http://cdn.wfp.org/guides/ui/v0.14.0/components/navigation/#pagination. As far as I know there are no options available right now other than making our custom component. The Next and Previous buttons are easily customisable.

[princylunawat]

@Utzel-Butzel i have already used the datatable.scss in the current library. i am still missing the column-width adjustment when putting the table in an outer container. You can see it deployed as-is on http://pydev.wfp.org:8311/. Any suggestions on how to fix?

I suggest we make further changes to datatable.scss to meet any remaining guidelines and including the pagination component as well.

[laurasilvani]

UI Elements & Projects.xlsx Here is a list of React elements used by the three React projects in WFP right now, recently updated.