This package has been deprecated

Author message:

Package no longer supported. Contact Support at for more info.

TypeScript icon, indicating that this package has built-in type declarations

0.0.1 • Public • Published


All Contributors

NPM API hook for React.js


npm install --save @codefund/react-api-hook

# Yarn
yarn add @codefund/react-api-hook


All you need to do is pass your CodeFund Property ID to the hook and save the ad markup to a variable:

const { ad } = useCodeFundAd(process.env.REACT_APP_CODEFUND_PROPERTY_ID)

The hook will return three values if you'd like to use them, but ad is the only necessary value.

Note that we only return an ad when your NODE_ENV is production.

ad: string

The markup for the ad that you can then render on a page.

Example Return Value
<link href="" rel="stylesheet" media="all"><div id="cf" data-template="default" data-theme="light"> <span> <span class="cf-wrapper"> <a href=";creative_id=580&amp;property_id=669&amp;template=default&amp;theme=light" class="cf-sponsored-by" target="_blank" rel="sponsored noopener"> <span class="cf-img-wrapper"> <img src="" alt="Sell Out Ethically" border="0" height="100" width="130" class="cf-img"> </span> <span class="cf-text"> <strong>Earn money without selling out.</strong> <span>Consider placing ethical ads on your site.</span> </span> </a> <a href="" class="cf-powered-by" target="_blank" rel="sponsored noopener"> <em>ethical</em> ad by CodeFund <img src="" data-src="" data-behavior="trackImpression" class="cf-impression" alt=""> </a> </span> </span> </div>

loading: boolean

A boolean value indicating whether the ad is in a loading state or not. You can use this to create a nice loading or skeleton effect, which you can see in the example app.

error: string

A string value that holds the response message from the fetch request in the event the request returns a non-200 response code.

Basic Example

import React from "react"
import { useCodeFundAd } from "@codefund/react-api-hook"

const App = () => {
  const { ad } = useCodeFundAd(process.env.REACT_APP_CODEFUND_PROPERTY_ID)
  return <Ad ad={ad} />

const Ad = ({ ad }) => (
  <div dangerouslySetInnerHTML={{ __html: ad }} />

export default App

Advanced Example

import React from "react"
import Skeleton from "react-skeleton-loader"
import { useCodeFundAd } from "@codefund/react-api-hook"

class App extends React.Component {
  render () {
    return <CodeFund />

function CodeFund () {
  const { ad, loading, error } = useCodeFundAd(process.env.REACT_APP_CODEFUND_PROPERTY_ID)
  if (loading) {
    return <AdLoading />

  if (!error) {
    return <AdMarkup ad={ad} />

function AdMarkup (props) {
  return <div dangerouslySetInnerHTML={{ __html: }} />

function AdLoading () {
  return <Skeleton count={5} width={"330px"} borderRadius={"0px"} />

export default App


We encourage you to contribute! Please check out the Contributing Guide for guidelines about how to proceed.

Code of Conduct

Everyone interacting with the project’s codebase and issue tracker are expected to follow the Code of Conduct.

Coding Standards

This project uses Prettier for JavaScript code to minimize bike shedding related to source formatting.

Please run yarn format prior to submitting pull requests.


Released under the MIT License.


Thanks goes to these wonderful people (emoji key):

Andrew Mason


Julian Rubisch


This project follows the all-contributors specification. Contributions of any kind welcome!




Package Sidebar


npm i @codefund/react-api-hook

Weekly Downloads






Unpacked Size

585 kB

Total Files


Last publish


  • andrewmcodes