React SmartTV Dimension

Library ensures proper height, width, font ratio SmartTV Tizen, WebOS: 1920x1080

Installation

Using npm:

npm install --save @react4tv/react-tv-dimension

or using yarn:

yarn add @react4tv/react-tv-dimension

Usage

Full Examples:

import { 
    DimensionProvider, 
    withDimensionContext,
    ScaleUtil
} from '@react4tv/react-tv-dimension';

class AppContainer extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    window.addEventListener('resize', this.resizeDocument);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resizeDocument);
  }

  private resizeDocument = () => {
    ScaleUtil.changeScaleRatio();
    this.props.dimensionContext.setAppDimension();
  };

  render(){
    const { width, height } = this.props.dimensionContext.dimension;
    return (
      <DimensionProvider>
        //...
      </DimensionProvider>
    );
  }
}

const App = withDimensionContext(AppContainer);

//Container
ReactDOM.render(<App />, "root");

Example