esl-pro-web-components
v0.0.18
Published
Downloads
30
Readme
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',
},
}
}}
/>
}