🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Using the CodyHouse components with React

Learn how to include the CodyHouse components in a React project.

Using the CodyHouse components with React

The CodyHouse components are accessible, progressively enhanced, HTML, CSS, JS components that work seamlessly with CodyFrame.

They are built using Vanilla JavaScript so they work with JS frameworks as well.

In this article, we want to show you how to include the CodyHouse components in your React project.

Install CodyFrame

The first step is including CodyFrame. This front-end framework (~15KB minified and gzipped) is composed of CSS variables, mixins, and utility classes used to stylize the Components.

Install CodyFrame as npm module. Once the installation is complete, copy the 📁custom-style folder (where you'll find the custom style templates) of the framework in the 📁src folder of your project, then import _base.scss (basic style) and _custom-style.scss in your style.scss file:

@import '~codyhouse-framework/main/assets/css/base'; 
@import 'custom-style';

You can now compile the _style.scss file in style.css as you would typically do using your webpack.config.js file.

You can find more info about the webpack configuration we use to load SCSS files and compile them to CSS on our Using the Framework with Webpack documentation page.

As the last step, we need to include the util.js file of the framework: this file contains utility functions and polyfills that we use when creating the components.

In your index.html file, add the following script tag:

<script src="https://unpkg.com/codyhouse-framework/main/assets/js/util.js"></script>

Progressive enhancement

The Components are built following the principle of progressive enhancement. Please make sure to include the following script in the <head> of your index.html file:

<script>document.getElementsByTagName("html")[0].className += " js";</script>

The script is used in CSS to target that Javascript is enabled and apply additional style accordingly. If you don't include the script, part of the style of the components won't be visible.

Import the CodyHouse Components

For each CodyHouse component, you can create a React component and return, in the render method, the HTML code we provide. For example, if you want to include the Read More component, you can create a ReadMore React component:

import React from "react";

class ReadMore extends React.Component {
  render() {
    return (
      <p className="read-more js-read-more" data-btn-class="read-more__btn js-tab-focus" data-ellipsis="off">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio corporis facilis, debitis a qui eum dolor repudiandae harum, impedit, fugit cumque. Tenetur, a quas labore eveniet accusantium, vero reiciendis quaerat inventore vel consequatur iusto fugiat perferendis rerum nihil qui deleniti earum eum numquam velit quod explicabo, fuga saepe ad temporibus! 
      </p>
    );
  }
};

export default ReadMore;

You can modify the HTML code of the component to include props.
For the Read More component, you could pass the data-btn-class and data-ellipsis as props (they are used to customize the behaviour of the component) and use the children prop for its content:

import React from "react";

class ReadMore extends React.Component {
  render() {
    return (
      <p className="read-more js-read-more" data-btn-class="{this.props.btnClass}" data-ellipsis="{this.props.ellipsis}">
        {this.props.children}
      </p>
  );
  }
};

export default ReadMore;

Now include the SCSS code of the component either inside the component file or in the _style.scss (as you would do with all your components).

For the JS code to work correctly, you'll need to load it once the component has been mounted.

In your 📁static folder, create a read-more.js file with the JS code of the component and modify the component to append this file to the body once it has has been mounted and to remove it once the component has been unmounted:

import React from "react";

class ReadMore extends React.Component {
  componentDidMount() {
    let frontEnd = document.createElement('script');
    frontEnd.src = '/static/read-more.js'; // 👈 make sure to use the correct path
    frontEnd.id = 'read-more-js';
    document.body.appendChild(frontEnd);
  }

  componentWillUnmount() {
    document.getElementById('read-more-js').remove()
  }

  render() {
    return (
      <p className="read-more js-read-more" data-btn-class="{this.props.btnClass}" data-ellipsis="{this.props.ellipsis}">
        {this.props.children}
      </p>
  );
  }
};

export default ReadMore;

That's all! Your ReadMore component is now complete.

Feedbacks/suggestions? Get in touch on Twitter.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us