• Introduction
• Steps
• 1. Clone Starter Project
• 2. Generate Hook
• 3. Specify Dependencies
• 4. Make Configurable
• 5. Add Implementation
• 6. Integrate Hook
• 7. Publishing

Step 2: Generate the Hook

In this step we're going to generate the custom hook.

You can view the finished code for this step by checking out the step-2 branch.

Run the Generator

The Lore CLI includes a number of commands that can generate files. Among them is a command that will generate starter code for a custom hook. Run this command to create a hook called polling-hook:

lore generate hook polling-hook

This command will create a folder called polling-hook at the root of your project, and place the starter code for a hook inside that folder. The structure should look like this:

polling-hook
|-- src
|   |--index.js
|-- test
|   |-- test.spec.js
|-- .babelrc
|-- package.json
|-- README.md

Add the Hook

Now that we've generated the hook, let's add it to the project so it gets loaded when the application boots up.

Open up index.js file at the root of your project and insert the polling-hook into the list of hooks. Note that we're using a relative path, since the hook is located within our project and not installed as an npm module.

// index.js
import models from 'lore-hook-models';
import polling from './polling-book/src';
import reducers from 'lore-hook-reducers';
...
lore.summon({
  hooks: {
    ...
    models,
    polling,
    reducers,
    ...
  }
});

With this change in place, the hook will now be loaded as the application boots up. To prove that, open up the file polling-hook/src/index.js. It currently it looks like this:

module.exports = {

  dependencies: [],

  defaults: {},

  load: function(lore) {
    // do something
  }

};

export default {

  dependencies: [],

  defaults: {},

  load: (lore) => {
    // do something
  }

};

export default {

  dependencies: [],

  defaults: {},

  load: (lore) => {
    // do something
  }

};

Modify the load function to look like this:

...
  load: function(lore) {
    console.log('polling-hook loading!');
  }
...

...
  load: (lore) => {
    console.log('polling-hook loading!');
  }
...

...
  load: (lore) => {
    console.log('polling-hook loading!');
  }
...

Now open the developer tools in the browser and refresh the page. If you examine the console, you should see the phrase polling-hook loading! printed out.

Next Steps

Next we're going to specify our hook dependencies.