Export a component to vanilla-js | Scribe

    Export a component to vanilla-js

    • Siddharth Kothari |
    • 0 step |
    • 2 minutes
    Navigate to the Search UI in the dashboard
    Click "UI Components"
    Click "Facets"
    Click "Customize" on an existing facet. Or, you can add a new facet.
    From under the "Complete Code" tab, copy the complete code by clicking the šŸ“‚ copy icon on top-right.
    Head over to the [https://codesandbox.io/s/export-a-component-to-vanilla-project-m7o6er](https://codesandbox.io/s/export-a-component-to-vanilla-project-m7o6er) The provided sandbox has a react project preconfigured to- - Have required `reactivesearch` lib dependency - Generate a single bundle file with styles included - setup to render the facet by pasting the complete code(copied in step 5) in a file named `Facet.js` under `src` folder.
    Start by forking the sandbox
    Head over to "src > Facet.js"
    Replace the contents of this file with the one copied in step 5
    Paste done āœ…
    Open the app in a new window
    Verify the Facet rendering in the app preview
    Get the reference to the js bundle Open dev tools > Sources tab > select static/js/bundle.js > right-click and "Copy link address"
    Head over to [codepen.io](http://codepen.io) Create a new "pen"
    Under the HTML section, have a div with id='root'. Add a script tag and paste the copied bundle reference in step 13 into the src="" attribute
    Verify the facet component rendering in the preview window

    Want to make guides like this in seconds? Yes, it's really that fast.

    This Scribe is in tip-top shape!Leave feedback if there are any issues with this Scribe