react-hackclub-webring
react library for https://github.com/hackclub/webring that supports SSR
Install
npm install --save react-hackclub-webring
Usage
The library allows you to manage fetching the data when convenient by using fetchWebringData()
. example/
has an example of fetching it client-side; example-next/
has an example of fetching it when rendering on the server using NextJS's getServerSideProps
.
Code Example
import React from 'react'
import { HackClubWebring, fetchWebringData } from 'react-hackclub-webring'
import 'react-hackclub-webring/dist/index.css' // be sure to import the styles
const Example = () => {
const [webringData, setWebringData] = useState(null)
useEffect(() => {
;(async () => {
//
setWebringData(await fetchWebringData())
})()
}, [])
return <HackClubWebring webringData={webringData} domainName='example.com' />
}
Props
Prop | Description | Default Value | Required | Notes |
---|---|---|---|---|
webringData | data from the fetchWebringData() function |
none | Yes | Allows your app to manage fetching when convenient (for SSR and stuff) |
domainName | the domain name of your website as on the webring's home page | none | Yes | For those of us with multiple domains for our websites, it allows the webring to work correctly. Also because when SSR with NextJS, I don't think window.location.hostname is available |
License
MIT © SConaway