search

FlatFilers / create-flatfile-react

0 stars 5 forks source link

Unable to add Flatfile to an existing Vite project using FlatfileProvider, however intiailizeFlatfile works #29

Open titus58 opened 5 months ago

titus58 commented 5 months ago

I'm trying to implement Flatfile on an existing project created with Vite. I'm having problems getting the iframe to start when using FlatfileProvider.

Initially I thought there's a problem with the HTML file or I'm missing some CSS. However, I also tried using the initializeFlatfile hook and everything worked well. I don't mind using initializeFlatfile but it shows up on my IDE as deprecated.

I extracted only the essential code on a small repo. In App.jsx I have two components. One uses initializeFlatfile and the other one FlatfileProvider.

https://github.com/titus58/flatfile-react/blob/master/src/App.jsx#L37

Can someone tell me what I'm doing wrong with the FlatfileProvider ?

Thanks

Arsik36 commented 5 months ago

Hey, thank you for reaching out to us. I am glad initializeFlatfile works well for you as you tried it. We are in the very final stages of updating the docs with code examples and repos around FlatfileProvider, I will make sure to update you as soon as they are out. You are safe to use initializeFlatfile for now. We are not going to add functionality to it, but it is supported, and we should have new docs come out very soon

titus58 commented 5 months ago

Got it. Thank you so much for the quick reply

premiare commented 5 months ago

I would love an @ from you @Arsik36 when the examples and docs are finalized!

Arsik36 commented 5 months ago

Will do :)

Arsik36 commented 5 months ago

Hi, thank you for your patience as we were updating the docs. Happy to let you know that we now updated docs for React and have an example repo.
Updated docs - https://flatfile.com/docs/apps/embedding/react/components
Example repo - https://github.com/FlatFilers/create-flatfile-react

Another useful link to keep handy is our public changelog where we document new features as they come out - https://flatfile.com/docs/changelog/platform

titus58 commented 5 months ago

Thanks for the update @Arsik36 . I can confirm it is working now.

I compared my old version to the new one that is working and it seems that the issue was having the useFlatfile hook in the same component as the FlatfileProvider. Once I moved the SheetConfig code to a separate component it looks like it is working well. This commit illustrates it best: https://github.com/titus58/flatfile-react/commit/294e3523b8325afbc3546ff64b333024ca393143

Btw, there are some syntax errors in the updated documentation. In FlatfileProvider -> config there are some commas missing after some lines (exitTest, exitPrimaryButtonText). Also it would be helpful if the value in configs are set in the docs, instead of referencing some variables (mountElement etc) that are outside the docs page.

Arsik36 commented 5 months ago

Thank you for letting me know, just PR-ed to correct the syntax issues :)