JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 50
  • Score
    100M100P100Q64930F
  • License MIT

Foundation Sites components built with the power of React and CSS Modules

Package Exports

  • react-foundation-components

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-foundation-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-foundation-components

Foundation Sites 6 components implemented in React and compatible with CSS Modules!

Why?

I like React. I like CSS Modules. I like Foundation Sites. This is an experiment to see if it's possible to combine all these tools in a modular way!

Installation

npm install --save react-foundation-components

Each component requires the subset of Foundation CSS it needs. If CSS Modules is enabled, the final CSS and JS bundle will use local scoped class names instead of Foundation's global class names!

Demo of the components is available here. Please see demo source code for an example webpack setup and example use of each component. Proper documentation to come later ...

Recommend importing on a per component basis instead of importing the main entry point of package. Importing main entry point will cause final bundle to include all CSS and JS whereas importing on a per component basis will cause your final bundle to only include the CSS and JS you actually need (this may change when tree shaking is introduced in webpack 2)!

Favor

import Button from 'react-foundation-components/lib/button';
import {ShowForScreenSize, HideForScreenSize} from 'react-foundation-components/lib/visibility';

over

import {Button, ShowForScreenSize, HideForScreenSize} from 'react-foundation-components';

Thanks

A lot of the components are inspired by React Bootstrap and this project even makes heavy use their utility libraries like react-overlays, dom-helpers, react-prop-types and uncontrollable. So big thanks to all these project's contributers for all their amazing work!