I’d like to customize the location of certain components (and perhaps even customize some of those components to a degree). Is there a way to import some of them into my own React app from the webviewer-ui?
For example, I’d like to take the <Note> component and provide its annotation prop object from what I’m getting from the annotations manager…So I can stick that component elsewhere outside of the notes panel that’s in the stock UI.
I don’t want to re-build an entire component for the notes, I’m simply looking to re-locate where an existing component is seen.
It seems like it’d work, but I don’t see the React components exported. Can I simply re-export them from index.js and make a build?
Our UI is open source meaning you can make any customizations you wish. We do not export the React components so this is the only way to make the customizations you are looking for.
Thanks, I’ve read through that one at a glance. I couldn’t determine if there was any advantage of using that repo over just using the exposed viewer SDK with my own custom components.
I took a crack at pulling that code into my own codebase, updated import paths, etc. It sorta worked but there was various missing contexts. So I’ll have to spend more time looking. It would be very nice to have a set of context providers or something to that affect and the ability to pull out individual components just to save some time…But so far I think just replicating the <Note> component shouldn’t be too bad. I’ll have to see how the <AnnotationNoteConnectorLine> was done, that’d be the one big thing missing immediately with a custom component.
Any files you can point me to or tips that might show how the data gets into the whole ecosystem of components in that webviewer-ui?
This use case is not really applicable because our UI is not technically “importable” - it ships as a compiled, standalone app that is loaded inside of an iframe. I think it is a cool idea but unfortunately our project is just not structured in a way where we can make this happen.
The UI works by just binding to events from the Core library. Things like annotations are just stored in local state in the NotesPanel component. Each annotation is then passed to the Note component from there.
A whole bunch of events and setup code is executed here - this would be a good place to start looking to get a high level understanding of how things work!
If you have any other questions please let me know.
Yea, that makes total sense. Though is it possible for me to import the whole thing into my own project if I fork the webviewer-ui repo?
I’m hoping that I can keep it as a HOC so all of the redux, state, hooks, etc. are available throughout my app. I know that requires some modification to the App.js or perhaps even a separate new file/component in there and that’s ok…But would there be anything that would prevent me from doing this?
I’m actually trying to plan a sprint so if I should go a completely custom direction instead of trying to fork coerce the webviewer-ui, it’d surely save me some time
I’m not exactly sure what you are trying to accomplish, but I would recommend just forking our UI and making whatever changes you need. The UI is quite complex and I think what you’re trying to do would be very difficult.
Basically, I’m just looking to situate the comments/notes panel outside of the PDF viewer element. I have a feed of other messages and activity and I want to blend it all into one panel.
While I can simply render the annotation comments, I also want users to be able to still comment from there too. I figured if I could import the components from the webviewer-ui then I could get all of the functionality of creating/updating/threading comments without rebuilding components. For this one off thing it’s not a bunch of work, but my thinking was that there was bound to be additional customizations as well. So having a customized version of the webviewer-ui would be good long term.
