akiran / react-foundation-apps

Foundation Apps components built with React

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.

react-foundation-apps's Issues

Fail to install due to peerDependencie problem with object-assign package

// When I install the app using npm, I got the following errors:
npm ERR! Darwin 14.3.0
npm ERR! argv "/Users/georgejor/.nvm/versions/node/v0.12.5/bin/node" "/Users/georgejor/.nvm/versions/node/v0.12.5/bin/npm" "install" "react-foundation-apps" "--save"
npm ERR! node v0.12.5
npm ERR! npm v2.11.2
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package object-assign does not satisfy its siblings' peerDependencies requirements!

// The package require object-assign 2.x version but in my package.json:
"object-assign": "^3.0.0"

Please help with this issue, thanks!

Links inside a modal are not click-able.

Regular links inside a modal don't behave as they normally would as clicking on them does nothing.

add animation-in and animation-out props to modal

It does not work properly with react 0.13

Shuld I recompile it for use with the new react version?

Modal and layers

First, thanks for the library! Good work!

Looking at your code, it seems that you implement modal dialogs by rendering them in the DOM and showing or hiding them. This does seem to be the Angular / Foundation for Apps way.

However, in React modals should use layers to render them on demand.

See:

facebook/react#379

and (the solution)

https://github.com/pieterv/react-layers

What do you think?

Peter

Cannot resolve module(s)

It appears that npm is trying to resolve modules in the current directory, rather than in node_modules.
I get about 10 of these messages, each about a different module.

ERROR in ./docs/install/index.jsx
Module not found: Error: Cannot resolve module 'react-highlight/lib/optimized' in /work/path/react-foundation-apps/docs/install
@ ./docs/install/index.jsx 6:16-56

My installation was simple:
clone
npm install // had to repeat this after getting XCode 7.0.1
npm start

Server side rendering

Hello @akiran,

I'm using react-foundation-apps for server side rendering with express-react-views . The CSS rendering woks ok, however the components do not pass in the data attributes needed to make the functionality available.

Any plans for supporting sever side rendering.

Cannot close Action Sheet by clicking outside of its bounds

In Foundation for Apps demo (documentation) I can close an Action Sheet by clicking on the background.

In your implementation it does not work. I have to click on the same button that opened the Action Sheet to close it again.

Is this a problem with the Demo code or with the React implementation of Foundation for Apps?

Cannot find module "react-foundation-apps/lib/modal"

Trying to import this package but console says:
Uncaught Error: Cannot find module "react-foundation-apps/lib/modal"

When i use var Modal = require('react-foundation-apps/lib/modal/index.jsx');
it says:
(on line 48) Unexpected token <
You may need an appropriate loader to handle this file type.

I'm using webpack and I added the .jsx extension to the config file. (Don't know if that has to do with anything though).

Thanks

Import Error: Cannot resolve 'file' or 'directory' ./lib/notification

Hello,

I am seeing an error when I import the ActionSheet module. I am using react-hot with the webpack-dev-server, along with React 0.13.1.

I did the following:

import ActionSheet from 'react-foundation-apps';

And I get
ERROR in ./~/react-foundation-apps/index.js Module not found: Error: Cannot resolve 'file' or 'directory' ./lib/notification in ./index.js @ ./~/react-foundation-apps/index.js 7:16-45

This looks like a really cool project, but unfortunately I can't use it. Let me know how I can help.
Thanks!

set overlay default prop of modal to true

Expose Animation

Expose the internal utilitty Animation as a component on RFA please.

Alternative to use of ids for referring components

When I asked for feedback in twitter , @gaearon mentioned that

I'm not in favor of using global ids for inter-app communication.

Opening this issue to discuss more about this.

Pulls in angular as a dependency

When installing with npm install react-foundation-apps, the post install bower install pulls in angular as a dependency along with foundation-apps. This is not cool for a library which aims to get rid of angular...:-/

Cant include component by their path

Hello,

Tried to add
var Offcanvas = require('react-foundation-apps/lib/trigger');

But it cant find it, I have to specify index.jsx but then in this component you also include
var PopupToggle = require('../popup/toggle');
And browserify cant find it.

install fails if bower is not already installed

npm ERR! [email protected] postinstall: `bower install`
npm ERR! Exit status 127
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is most likely a problem with the react-foundation-apps package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     bower install
npm ERR! You can get their info via:
npm ERR!     npm owner ls react-foundation-apps
npm ERR! There is likely additional logging output above.

npm ERR! System Linux 3.19.0-21-generic
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "install"
npm ERR! cwd /home/owen/projects/activatefan.club/client-src
npm ERR! node -v v0.10.25
npm ERR! npm -v 1.4.21
npm ERR! code ELIFECYCLE

Seems odd to expect bower to be installed. If you're going to depend on it, you could add it as a dependency of this package (or better yet skip bower entirely and just install foundation-apps via npm: https://www.npmjs.com/package/foundation-apps).

Simplify build process and update generator

Running locally and viewing docs

I'm really interested in this port you're working on to build react components using foundation. The react-bootstrap project seems to be doing really well but there's definitely need for the equivalent for foundation.

I cloned the repo locally, ran npm install and bower install, and then ran gulp server. When I attempt to load localhost:8000 in the browser, I get the rendered markup and some script tags but no application renders. Is the current version not building and stable? I'm mostly interested in seeing the generated docs, but I can read through the code to implement this as well.

Anyway, I got a couple of errors during the server task which might be related:

ERROR in ./lib/popup-toggle.jsx
Module not found: Error: Cannot resolve module 'tether/tether' in /react-foundation-apps/lib
 @ ./lib/popup-toggle.jsx 7:13-37

ERROR in ./docs/accordion/index.jsx
Module not found: Error: Cannot resolve module 'escape' in /react-foundation-apps/docs/accordion
 @ ./docs/accordion/index.jsx 7:17-48

ERROR in ./docs/accordion/index.jsx
Module not found: Error: Cannot resolve module 'escape' in /react-foundation-apps/docs/accordion
 @ ./docs/accordion/index.jsx 8:16-46

Thanks, and a question

First thanks for this, amazing stuff! My question is how do i close a offcanvas when the user clicks outside of the offcanvas? by clicking the button Trigger it naturally closes it, but i want it to close this by also clicking outside of the offcanvas space

Module not found: Error: Cannot resolve module 'react-foundation-apps/lib/modal'

How can I use modal?

Add swipe to close trigger

Parent component setState events not triggering tab content re-renders

I have a page like this:

React.createClass({
  onChange: function() {
    this.setState({
      customer: CustomerStore.getCustomer()
    })
  },

...

  render: function() {
    return (
      <div className="CustomerPage">
        <div id="body">
          <Tabs>  
            <Tabs.Tab title='Balances'><BalancesTab customer={customer} /></Tabs.Tab>
            <Tabs.Tab title='Cards'><CardsTab customer={customer} /></Tabs.Tab>
            <Tabs.Tab title='Loans'><LoansTab customer={customer} /></Tabs.Tab>
          </Tabs>
        </div>
      </div>
    )
  }
})

If I update the CustomerStore with a customer (say via an asynchronous request), it
will not trigger the tab content components to re-render.

I believe that is due to the cloneWithProps call (https://github.com/akiran/react-foundation-apps/blob/master/lib/tabs/index.jsx#L16).

Incidentally, cloneWithProps is now deprecated and it should be React.cloneElement. I'm not able to
make it work even by using that cloneElement, though. I can think of a few workarounds but they all seem
terrible.

Any ideas?

Flex Grid

Hey,
great work on starting to port the awesome foundation for apps over!!!
I am looking at this for the first time and am very impressed.

I just wanted to ask if the grid from foundation for apps is also available?
I would really like to use it, or would you suggest to use another solution for that, like for instance https://github.com/tcoopman/react-flexbox or just a global stylesheet with the grid classes?

Cheers

CSS not loading

I ran the bower install foundation-apps --save command but no styling appears. I'm trying to use the Modal component. It appears on the page but with no styling applied. What can I have missed? Could it be something with webpack?

I also ran bower install foundation-apps even though it is already added as a dependency but for no luck.

Please help a noob.

Modal and Events

Hi,
First of all, thanks for all the work done on React-Foundation-Apps.

I just wanted to report a minor issue while creating a modal containing elements with events. It raises the error : TypeError: e.stopProppagation is not a function in lib/modal/index.jsx line 40.

The typo seems to be the problem.

The modal's overlay allows closing without an event

Their is no way to detect when a user clicks away from the model (on the background) triggering it to close. The event happens here when it calls this.setState({open: false}):

https://github.com/akiran/react-foundation-apps/blob/master/src/modal/index.jsx#L35

  hideOverlay: function (e) {
    e.preventDefault();
    if (this.props.overlayClose) {
      this.setState({open: false});   
    }
  },

In our case, we can't use componentWillUnmount, we are using a global model that remains mounted the entire life of the app. When subscribed to the model ZfApi.subscribe(this.props.modalId, (name, msg) => { it would be ideal to see a "close" event issued for the overlayClose in addition to the X and Cancel.

Fix broken notification component in master branch

Use classnames instead of react/lib/cx

Referenced here: https://facebook.github.io/react/docs/class-name-manipulation.html

and here: reactjs/react-modal#28