https://github.com/kossnocorp/hoc-loader

Webpack loader that wraps component modules into given HoC
https://github.com/kossnocorp/hoc-loader

hoc preact react webpack webpack-loader

Last synced: 3 months ago
JSON representation

Webpack loader that wraps component modules into given HoC

• Host: GitHub
• URL: https://github.com/kossnocorp/hoc-loader
• Owner: kossnocorp
• Created: 2017-06-30T18:55:20.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-09-26T10:19:42.000Z (over 6 years ago)
• Last Synced: 2024-10-05T13:54:01.088Z (4 months ago)
• Topics: hoc, preact, react, webpack, webpack-loader
• Language: JavaScript
• Homepage:
• Size: 1.95 KB
• Stars: 5
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# hoc-loader

> **⚠️ Warning**: This loader is tested only with a single loader ([desvg-loader])

and a simple use case in mind.

**hoc-loader** is a webpack loader that allows to wrap the result of

the previous loader in the chain into a high-order component.

## Installation

```bash

npm i hoc-loader --save-dev

# or

yarn add --dev hoc-loader

```

## Configuration

```javascript

// ...

{

  test: /\.svg$/,

  use: [

    {

      loader: 'hoc', // 👈 Add loader

      options: {

        // 👇 The path to the HoC file. It must be absolute to the FS root

        // or relative to the instrumented file.

        path: '/path/to/Icon/index.jsx',

        // 👇 Depending on how HoC file is built, (e.g. if you use Babel

        // along with ES Modules) you may need to enable this option,

        // so the HoC file will be required as `require('path/to/hoc').default`.

        //

        // `false` by default

        useDefault: true,

        // 👇 The name of the export var used by the previous loader.

        // It depends on the loader, e.g. css-loader exports CSS Modules

        // into `exports.locals`, while svg-loader uses `module.exports`.

        //

        // `module.exports` by default

        exportVar: 'exports.locals'

      }

    },

    'desvg/react',

    'svg'

  ],

  // or if you prefer classic:

  loader: `hoc?useDefault&path=/path/to/Icon/index.jsx!desvg/react&exportVar!svg`

},

// ...

```

## Example

See a HoC example (in combination with [desvg]):

```js

import React from 'react'

import { Wrapper } from './style.css'

export default function (Svg) {

  return function Icon ({ width = '2rem' }) {

    return (

      


        

      

    )

  }

}

```


## License

[MIT © Sasha Koss](https://kossnocorp.mit-license.org/)

[desvg-loader]: https://github.com/kossnocorp/desvg-loader

[desvg]: https://github.com/kossnocorp/desvg