'ReactReaderStyle' only refers to a type, but is being used as a value here.

[lakshmikanth-reddy-au2]

Hey, I am trying to use custom styling, But the ReactRenderStyle is only refering to type. I cannot use it as value. Can someone help?

I am using the latest version @0.21.2

[GrammyBread]

Hi There!

I believe this was a miss in the Typing for this project. Based off of a quick review of the typing, it doesn't look like the types for this project were written to properly support custom styling in typescript. I don't see that the owners specifically called out typescript support for this feature, so I'm guessing this may be on their roadmap (if they are still supporting this project)

The error is logical: the only export of "ReactReaderStyles" in their typing files is a type currently, not an object definition that can be used in an expander operation. After digging through the code base a bit, I was able to find the default styles being used at react-reader/src/modules/ReactReader/styles.js & react-reader/src/modules/EpubViewer/styles.js. Unfortunately, though, there is an override of EpubViewer's style property currently in the types export, which makes the types incompatible for setting, since the ReactReader component only accepts style prop of type "ReactReaderStyle" which does not extend the EpubViewer styles. I couldnt distinguish how they're handling this mismatch downstream.

Even after attempting to pump in the default styles I saw in the files mentioned above, my viewer wasn't rendering the internal IFrame element as expected. Perhaps more could be done, but I simply moved on 🤷

In order for this to properly be supported, I believe the collaborators will need to fix the override issue mentioned above, and perhaps provide a hook for the default types they're using in the JS portion of this solution.

[gerhardsletten]

@lakshmikanth-reddy-au2 @GrammyBread This should be fixed in react-reader@1.0.1, did a major version since I did some cleanup on the names of exported types. You should be able to import styles and its types properly now:

import React from 'react';
import { ReactReader, ReactReaderStyle, IReactReaderStyle, EpubViewStyle, IEpubViewStyle } from 'react-reader'

function App() {
  const readerStyles:IReactReaderStyle = {
    ...ReactReaderStyle,
    container: {
      ...ReactReaderStyle.container,
      color: 'red'
    }
  }
  const epubViewStyles:IEpubViewStyle = {
    ...EpubViewStyle,
    view: {
      ...EpubViewStyle.view,
      color: 'red'
    }

  }
  return (
    <div className="App">
      <ReactReader
        readerStyles={readerStyles}
        epubViewStyles={epubViewStyles}
        url="xx"
      />
    </div>
  );
}

export default App;

[MilewskiMateo]

@gerhardsletten Is this fix already released? I'm currently on 0.21.3. Should I wait for 0.21.4?

[MilewskiMateo]

@gerhardsletten Is this fix already released? I'm currently on 0.21.3. Should I wait for 0.21.4?

Never mind just found 1.0.1 version. My mistake.