uKalpa

Use Zurb Foundation Layout Framework in ReactJS project and customize CSS by your requirements.

Add Foundation into your ReactJS project

Add foundation-sites and jquery into your project, the reason for adding jQuery is there are some Foundation javascript animations require Foundation initiation using jQuery.

$npm i foundation-sites jquery

Copy the default setting sass file from foundation-sites to your project, and you can customize any elements styles in _settings.css later.

$cp node_modules/foundation-sites/scss/settings/_settings.scss _settings.scss

Edit _settings.scss

...

@import 'util/util';  

// Change the above line to follow:
@import '~foundation-sites/scss/util/util';

...

Include the default settings in your sass file, then you can use the foundation HTML class in your JSX file.

// App.scss
@import "settings";
@import "~foundation-sites/scss/foundation";
@include foundation-everything;

// Example of changing the top bar background colour
.top-bar {
  background: #ff0000;
  .menu {
    background: #ff0000;
  }
}

There are some Foundation components using javascript so you need to activate the foundation HTML code by initiating it as below

import React, {useCallback, useEffect} from 'react';
import $ from 'jquery';
import Foundation from 'foundation-sites';

export default function () {

    const foundationTopNav = useCallback(node => {
        if ( node !== null ) {
            $(node).foundation();  // Initiate Foundation code at here.
        }
    })

    return (
        <div ref={foundationTopNav}>
            <div className="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
                <button className="menu-icon" type="button" data-toggle="responsive-menu"></button>
                <div className="title-bar-title">Menu</div>
            </div>
            <div className="top-bar" id="responsive-menu">
                <div className="top-bar-left">
                    <ul className="dropdown menu"  data-responsive-menu="drilldown medium-dropdown">
                        <li className="menu-text">Site T1itle</li>
                        <li>
                            <a href="#">One1</a>
                            <ul className="menu vertical">
                                <li><a href="#">One</a></li>
                                <li><a href="#">Two</a></li>
                                <li><a href="#">Three</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Thre1e</a></li>
                    </ul>
                </div>
                <div className="top-bar-right">
                    <ul className="menu">
                        <li><input type="search" placeholder="Search" /></li>
                        <li>
                            <button type="button" className="button">Search</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    )
}