react hooks support? about dataformsjs HOT 3 CLOSED

Thanks, const useState = React.useState is what I needed! (You may want to consider adding that in the docs or an example somewhere.)
👍

from dataformsjs.

Thanks @crazy4groovy

Your advice helped me improved the main readme doc so I gave you credit for the idea in the https://github.com/dataformsjs/dataformsjs/blob/master/CHANGELOG.md on the release that I just published!

It was buried in the detailed docs before but this makes it much clearer I think for someone who see's the project for the first time.

Thanks again!

from dataformsjs.

Thanks @crazy4groovy !

Great question. I assume you are talking about the jsxLoader. Yes there are several different methods:

Example using Global React Object

// This exits at the top of the file:
const useState = React.useState;
const useReducer = React.useReducer;

https://awesome-web-react.js.org/examples/state-management/react-hooks.htm

Source
https://github.com/dataformsjs/awesome-web-react/blob/master/examples/state-management/react-hooks.jsx

Docs
This topic in the doc shows several additional options, for example if coming from node/webpack and copying and pasting the a file for browser then simple find and replace methods can be used to handle existing code.
https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md#handling-node-importexport-statements-and-browser-exportsrequire

Here are a few more examples using popular hook libraries:

React Hook Form
https://awesome-web-react.js.org/examples/forms/react-hook-form.htm

React Query
https://awesome-web-react.js.org/examples/component-and-hook-libraries/react-query.htm

Basically JSX Loader simply transforms the JSX to JS for modern browsers (happens in milliseconds) and if a old browser is used (IE 11, older iPhones with Safari, etc) then the JSX Loader will download Babel Standalone and use that for the compiler.

As for the React Components currently only Components have been published for DataFormsJS. For example <JsonData> which is used to easily specify JSON Web Services and pass the data to child components:

function DataPage() {
    return (
        <JsonData
            url="https://www.dataformsjs.com/data/geonames/countries"
            isLoading={<ShowLoading />}
            hasError={<ShowError />}
            isLoaded={<LazyLoadDataPage />}
            loadOnlyOnce={true} />
    );
}

from dataformsjs.