Use AnyMod in a React project

Setup

To use modules with React (opens new window), 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>
  }
}

TIP

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 (opens new window) 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 (opens new window).

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.

TIP

See the section on AnyMod.render for more.