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 is composed of CSS variables, mixins, and utility classes used to stylize the Components.
Follow this guide to install CodyFrame as npm module and import the custom style folder of the framework.
Once this is done, you can 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 inside the _style.scss file (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.
