Adding instruction for use with React projects.

[JOLee83]

In the Index.js file.

import * as smoothscroll from 'smoothscroll-polyfill';

smoothscroll.polyfill();

Thanks for this, works great and it was exactly what I needed for a project.

[Dakkers]

it's already in the readme

[fredspivock]

Having trouble getting it to work with React + Typescript. I have it in my index.tsx but it does not seem to work when I run my app in the iOS simulator.

[florian-wilisch]

This doesn't work for me... :(

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import * as smoothscroll from 'smoothscroll-polyfill';

smoothscroll.polyfill();

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

This is in the index.js file. Am I doing anything wrong?!

[Dakkers]

@florian-wilisch try importing it before React, e.g.

// Polyfills
import * as smoothscroll from 'smoothscroll-polyfill';
// The rest :)
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

smoothscroll.polyfill();

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

[florian-wilisch]

@Dakkers , unfortunately that didn't work. :-/

[galvaodev]

@fredspivock Solution for Typescript, add in an index.tsx hook for useEffect. It needs to load first as soon as the page is rendered.

Example:

import * as smoothscroll from 'smoothscroll-polyfill' useEffect(() => { smoothscroll.polyfill() }, [])