esl-pro-web-components

Localhost testing

Simply run npm install and npm run dev

React Create App:

Import the library in your index file like this:

import 'esl-pro-web-components'
import {WorldRankingProps} from 'esl-pro-web-components'

declare global {
       namespace JSX {
               interface IntrinsicElements {
                       'world-ranking': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & WorldRankingProps
               }
       }
}

const Component = () => {
    return <world-ranking />
}

NextJS:

As you do not have access to document or window in NextJS, you will have to import the module using lazy import inside useEffect hook:

import {WorldRankingProps} from 'esl-pro-web-components'

declare global {
       namespace JSX {
               interface IntrinsicElements {
                       'world-ranking': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & WorldRankingProps
               }
       }
}

const Component = () => {
    useEffect(() => {
            import('esl-pro-web-components')
    }, [])

    return <world-ranking />
}

With theming

const Component = () => {
    useEffect(() => {
            import('esl-pro-web-components')
    }, [])

    return <world-ranking
				ref={(ref: HTMLElement & WorldRankingProps | null) => {
                    if (!ref) {
                        return
                    }
					ref.theme = {
						container: {
							backgroundColor: 'blue',
						},
					}
				}}
			/>
}