Skip to content
Foundation Apps components built with React
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Moved vendor from src directory to root directoy Jun 25, 2015
docs
src
vendor Moved vendor from src directory to root directoy Jun 25, 2015
.gitignore
.jshintrc
.npmignore Updated package.json to publish jsx to js transformed files in lib fo… Jun 25, 2015
LICENSE Initial commit Nov 14, 2014
README.md
bower.json foundation-apps version pushed to 1.1.0 May 15, 2015
gulpfile.js
index.js
package.json updated docs Oct 14, 2015
webpack.config.dist.js
webpack.config.js Added animationIn and animationOut props to modal Mar 14, 2015

README.md

React Foundation Apps is a react port of Foundation Apps

Foundation Apps is a new framework for building web apps. It has awesome new features like flexbox based grid, motion-ui, and several core components for building web apps. But, javascript components of foundation-apps are built with angular.

Try React Foundation Apps, if you want to use react.

React Foundation Apps lets you avail the benefits of both React and Foundation Apps.

Checkout documentation

Installation

  npm install react-foundation-apps

Don't forget to install foundation-apps for css components

  bower install foundation-apps

Usage

Currently, built tools like browserify or webpack are required for using react-foundation-apps.

All the components are in react-foundation-apps/lib. You can import the required components like so

var Accordion = require('react-foundation-apps/lib/accordion');

Example

var React = require('react');
var Accordion = require('react-foundation-apps/lib/accordion');

var SampleAccordion = React.createClass({
  render: function () {
    return (
      <Accordion>
        <Accordion.Item title='First item title'>
           First item content
        </Accordion.Item>
        <Accordion.Item title='Second item title'>
          Second item content
        </Accordion.Item>
        <Accordion.Item title='Third item title'>
          Third item content
        </Accordion.Item>
      </Accordion>
    );
  }
});

module.exports = SampleAccordion;

Sponsors

If your company likes to sponsor this project, contact me.

You can’t perform that action at this time.