Use AnyMod in a React project
Setup
To use modules with React, add the mod tag via React's render
and call AnyMod.render()
when the React component has mounted:
class Demo extends React.Component {
componentDidMount () {
AnyMod.render()
}
render () {
// Card with top image
return <div id="anymod-aklnr"></div>
}
}
React requires you to use quotation marks ("
) for attributes.
You can use AnyMod.render()
by itself or with a callback or promise. See the section on AnyMod.render for more.
Example
Rendering multiple mods
You can render multiple mods the same way as a single mod. However, React does require that its internal render
function returns a single element. So to render multiple mods in a single React component, wrap them in a common element such as a <div>
, like so:
render () {
return (
<div>
{/* Card with top image */}
<div id="anymod-aklnr"></div>
{/* GitHub button */}
<div id="anymod-oorka"></div>
{/* Team page */}
<div id="anymod-dmkdn"></div>
</div>
)
}
Create React App
If you are using Create React App or another ESLint tool, you may encounter an error along the lines of 'AnyMod' is not defined no-undef
. In this case, you should add the following to the top of any files using AnyMod.render()
:
/* global AnyMod */
You can learn more about this solution here.
Re-rendering
You can call AnyMod.render()
as often as you'd like in your React component (or elsewhere). This method will not lead to an API call every time; if a mod has already been fetched once, AnyMod.render()
will use that data instead of making another API call.
See the section on AnyMod.render for more.