digiaonline / react-foundation Goto Github PK
View Code? Open in Web Editor NEWFoundation as React components.
Home Page: https://digia.online/react-foundation-docs/
License: MIT License
Foundation as React components.
Home Page: https://digia.online/react-foundation-docs/
License: MIT License
Is there a way to use one or two components only? Without bringing whole library into the app?
This looks scary when you only need a Switch for example.
npm install react-foundation --save
import Foundation from 'react-foundation';
// Use components ...
Is it possible to use the XY grid with this package?
Looking to use this awesome package in a TS project. My options are:
npm install react-foundation @types/foundation
and the declarations will have to be manually kept in sync with future changes to your APInpm install react-foundation
and TS will find them. Declarations need to be manually updated in line with API changes.Thoughts, or any plans in this direction?
Actually I was just about to install and use the react-foundation module when I realized the availability of the component which is identical to ... that I use regularly with react router v4, and I was wondering before amending any of my react code if this will be an issue...?
Has anyone tried using both in the same component?
npm install --save react-foundation
program would run
console.warn node_modules/react/lib/lowPriorityWarning.js:40
Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs
"react-foundation": "^0.8.0",
Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.
import { Badge, Colors } from 'react-foundation';
...
...
<div className="badge-colors-example">
<Badge color={Colors.SECONDARY}>2</Badge>
<Badge color={Colors.SUCCESS}>3</Badge>
<Badge color={Colors.ALERT}>A</Badge>
<Badge color={Colors.WARNING}>B</Badge>
</div>
I tried using this great repo in an isomorphic app. I found that the ResponsiveNavigation
component has references to window
:
componentDidMount() {
window.addEventListener('resize', this.update.bind(this));
}
componentWillUnmount() {
window.removeEventListener('resize', this.update.bind(this));
}
This causes an issue on the server side.
Can you please confirm that this is known behavior. Is there a way to work around this in the code already?
Thanks
Tried to use XY-Grid
It to work.
I'm having issues with the XY-Grid. Grid works fine though.
With XY-Grid (Grid
& Cell
) I get the following (my file stays the same though other than swapping out the react-foundation components:
0.9.0
Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.
XY-Grid (this doesn't work):
import React from 'react';
import { GridContainer, Grid, Cell } from 'react-foundation';
export class ProductList extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<GridContainer>
<Grid>
<Cell>
Test1
</Cell>
<Cell>
Test2
</Cell>
<Cell>
Test3
</Cell>
</Grid>
</GridContainer>
);
}
}
Grid (this works):
import React from 'react';
import { Row, Column } from 'react-foundation';
export class ProductList extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<Row>
<Column>
Test1
</Column>
<Column>
Test2
</Column>
<Column>
Test3
</Column>
</Row>
);
}
}
Hi, I'd expect the isDisabled property to also have semantic functionality like it does on the normal <button>
html component instead of purely cosmetic styling as currently is the case.
isDisabled={true}
to a Button
I expected the button to not call its onClick method when clicked
The method was called
^0.9.6
Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.
<Button
id="next-button"
onClick={() => {console.log('hi!') }}
isDisabled={true}
>
Next step
</Button>
npm install
node v6.3.1
npm 3.10.3
Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.
npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated to-iso-string@0.0.2: to-iso-string has been deprecated, use @segment/to-iso-string instead.
npm WARN deprecated jade@0.26.3: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN prefer global node-gyp@3.4.0 should be installed with -g
use Column and Row properties with properties such as isColumn, offsetOnMedium, etc...
react 15.2.0 not to throw warnings
spams Unknown Prop Warnings
^0.6.8
I imagine this might be an issue throughout the library, but Row and Column were the only components in use right now.
I got the follow error:
Module not found: Error: Cannot resolve module 'classnames' in .../node_modules/react-foundation/lib
@ ./~/react-foundation/lib/utils.js 16:18-39
which was solved by:
npm install classnames --save
Added 'full' property to GridContainer - e.g. <GridContainer full />
Container renders with full added to the div's class without console warnings.
Container renders with full added to the div's class but browser console emits a warning and a stack trace:
Warning: Received `true` for a non-boolean attribute `full`.
If you want to write it to the DOM, pass a string instead: full="true" or full={value.toString()}.
in div (created by GridContainer)
(This warning is also emitted by later versions of enzyme (I'm on 3.2.0), but not the one included in the project (2.1.0)).
0.9.2
Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.
<GridContainer full />
(or similar warning with fluid):
<GridContainer fluid />
I believe this is because it's not removing the custom props - in the call to removeProps
in GridContainer
, it's passing the wrong propTypes
, it's using Grid.propTypes
, it should be using GridContainer.propTypes
. I have a fix with updated tests, I'll submit a pull request.
I wrote an initial implementation of the Reveal component for a project I've been working on:
https://gist.github.com/crisu83/9f18311b4350de7a5a59b2192c5b09ee
Any comments?
Looked for examples of Accordion & XY-Grid on https://react.foundation/
I expected there to be examples for every component provided in react-foundation
Those two components (and possibly others) were missing examples.
Currently the react.foundation website seem down. Is there another source for the documentation ?
Hello, I'm fairly new to React (and not an expert at JS in general). Do you have any suggestions on the best way to override the built in enums that get imported into each component?
I am using the scss version of foundation-sites, and I've made some modifications to the settings file. I've added new colors to the foundation-palette (what controls the colors for components...primary
, secondary
, warning
, etc) is one change that comes to mind, but there are probably others as well.
How would I make these usable with react-foundation? In the colors example, I now have a class called hollow
that I would need to be available in ButtonColors
, and in LabelColors
for sure.
Add a Column component with the prop isColumn
.
A div with the class column
instead of columns
.
The expected result is correct, but a warning regarding the prop isColumn
show in the console.
0.9.4
Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.
import React from 'react';
import ReactDOM from 'react-dom'
import { Row, Column } from 'react-foundation';
const Grid = () => (
<Row>
<Column isColumn>column</Column>
</Row>
);
ReactDOM.render(<Grid />, document.getElementById('root'));
In the current implementation Foundation classes (e.g. badge
) are not added to a component when a custom class name is defined.
Here is how the Badge class names are currently built:
createClassName(props.className || 'badge', props.color, generalClassNames(props))
I propose that we add a boolean property that controls whether or not the Foundation class name is added, e.g. noDefaultClassName
. With this change the implementation above would read:
createClassName('badge', props.className, props.color, generalClassNames(props))
The accordion component is currently missing, and is one of the more useful components and having it would be a good thing.
I'm not too familiar with styling frameworks so was wondering if this would work with React Native. If not, are there any alternatives as far as Foundation goes that would work with mobile?
Thank you!
What did you do?
Tried to create a simple ResponsiveNavigation component.
What did you expect to happen?
No warning. It looks like the isHidden prop is getting passed through to the div via the TitleBar component here: https://github.com/nordsoftware/react-foundation/blob/develop/src/components/responsive.js#L73
I would expect that either removeProps needs to be called before passing the props to the div in Titlebar or isHidden can not be passed down to TitleBar since the component does not appear to be using it: https://github.com/nordsoftware/react-foundation/blob/develop/src/components/responsive.js#L100-L110
There may be other places in the code this is happening. I happened to stumble across this one.
What version of this module are you using?
0.7.0
Additionally: using latest React 15.3.2 (this warning was introduced in React 15.2.0)
Code
render (
<ResponsiveNavigation>
Test
</ResponsiveNavigation>
);
npm WARN deprecated [email protected]: ๐ Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
npm WARN deprecated [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated [email protected]: to-iso-string has been deprecated, use @segment/to-iso-string instead.
npm WARN deprecated [email protected]: This package is unmaintained. Use @sinonjs/formatio instead
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: ReDoS vulnerability parsing Set-Cookie https://nodesecurity.io/advisories/130
npm WARN deprecated [email protected]: Use uuid module instead
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
Package Current Wanted Latest Location
babel-eslint 6.1.2 6.1.2 8.2.2 react-foundation
babel-istanbul 0.7.0 0.7.0 0.12.2 react-foundation
chai 3.5.0 3.5.0 4.1.2 react-foundation
chai-enzyme 0.4.2 0.4.2 0.8.0 react-foundation
cheerio 0.20.0 0.20.0 1.0.0-rc.2 react-foundation
codeclimate-test-reporter 0.3.3 0.3.3 0.5.0 react-foundation
enzyme 2.9.1 2.9.1 3.3.0 react-foundation
eslint 2.13.1 2.13.1 4.18.2 react-foundation
eslint-plugin-react 4.3.0 4.3.0 7.7.0 react-foundation
expect 1.20.2 1.20.2 22.4.0 react-foundation
foundation-sites 6.4.3 6.4.3 6.4.4-rc1 react-foundation
husky 0.13.4 0.13.4 0.14.3 react-foundation
istanbul 1.0.0-alpha.2 1.0.0-alpha.2 0.4.5 react-foundation
jsdom 8.5.0 8.5.0 11.6.2 react-foundation
mocha 2.5.3 2.5.3 5.0.4 react-foundation
react 0.14.9 0.14.9 16.2.0 react-foundation
react-addons-test-utils 0.14.8 0.14.8 15.6.2 react-foundation
react-dom 0.14.9 0.14.9 16.2.0 react-foundation
sinon 1.17.7 1.17.7 4.4.3 react-foundation
npm WARN prepublish-on-install As of npm@5, `prepublish` scripts are deprecated.
npm WARN prepublish-on-install Use `prepare` for build steps and `prepublishOnly` for upload-only.
npm WARN prepublish-on-install See the deprecation note in `npm help scripts` for more information.
Would it be possible to include in the Github repo the css used for each component in react.foundation?
I believe it would come very handy to many, to have some default styling rather than implementing each and every class manually.
Thank you
I installed react-foundation using npm.
Then in my component I imported the necessary react-foundation components.
import { Accordion, AccordionItem, AccordionContent, AccordionTitle} from 'react-foundation'
Then I set up my component as shown below (there's an axios get being called in componentDidMount to set the donors state).
<Accordion>
{this.state.donors.map(function(donor, i) {
return(
<AccordionItem key={donor.title}>
<AccordionTitle>{donor.title}</AccordionTitle>
<AccordionContent>
<div dangerouslySetInnerHTML={{__html: donor.markup}} />
</AccordionContent>
</AccordionItem>
);
})}
</Accordion>
I expected the accordion to open and collapse when clicking the titles
Nothing happens when you click the titles. The content is never shown.
Latest version
Cell accepts both GeneralPropTypes
and FlexboxPropTypes
but only calls generalClassNames(props)
. It does not call flexboxClassNames(props)
.
Pass alignX='center'
or centerAlign
to a Cell
Contents of cell to be centered
Contents were not centered. Cell generated did not have any other classes.
0.9.3. Foundation-sites: 0.9.5.
Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.
<Cell alignX='center'>alignX</Cell>
<Cell centerAlign>centerAlign</Cell>
It feels wrong to use valid HTML attribute names for component properties (button color, etc.).
Maybe we should prefix the attributes with something like f
or rf
(as in react-foundation).
Then again, while fColor
sounds ok, fOffsetOnLarge
doesn't sound that nice.
HOWEVER, this would remove the need for lodash.omit
and reduce the number of dependencies, so I would seriously consider this.
EDIT: I already removed the lodash
depedencies so that point is not valid anymore.
Things needed:
Tried to use ResponsiveNavigation
Rendering of titleBarTitle is unknown
Rendering of titleBarTitle is unknown
latest
Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.
<ResponsiveNavigation titleBarTitle="Test">
<TopBarLeft>
<Menu>
<MenuText>Test</MenuText>
<MenuItem isActive>
<a href="/">Home</a>
</MenuItem>
</Menu>
</TopBarLeft>
<TopBarRight>
<Menu alignment="right">
<MenuItem>Logoutt</MenuItem>
</Menu>
</TopBarRight>
</ResponsiveNavigation>
I want to make abide work on form validation
Form validation, How can i import other js library?
I tried to import { Abide, Foundation } from 'react-foundation';
0.9.2
Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.
code goes here
Hey Guys,
I'm looking to see what you might want help with. I think I could flesh out some examples, look into making some of your components stateless, maybe connect the examples to redux to show a prototype for the more complex "dumb" components. I'd also like to add certain syntactic/structural changes according to the linters I've been used to but I don't want to make any PRs before getting a blessing. My team is currently using a lot of this so I'd like to flesh some things out as we do.
Using react-16beta with react-foundation failed because react-foundation's Accordion components was using React.PropTypes
, which is deprecated in React v15.x and removed in v16; instead of the recommended way of using the dedicated package: prop-types
Accordion to use prop-types
package instead of React.PropTypes
0.8.0 - 0.8.2 since Accordion is introduced
Please refer to facebook/react#10294 (comment)
Thank you
Visited react.foundation
Load the page
SSL Certificate error
So far npm i
throws an error as it calls yarn
which is not mentioned as a requirement and also many do not (yet) use yarn.
Some of the badges are broken, probably due to the organization rename almost a year ago
Hey all,
New installs of foundation-sites no longer have out of the box support for the float-grid system used by the Row and Column components. It has to be specifically enabled. This will no longer work for folks like myself making fresh codebases with the latest versions of foundation-sites and react-foundation:
<Row className="display">
<Column small={2} large={4}>4 columns</Column>
<Column small={4} large={4}>4 columns</Column>
<Column small={6} large={4}>4 columns</Column>
</Row>
Digging through the commits for react-foundation, I saw that all the work to use the XY-grid system has already been done, and this works perfectly:
<Grid className="display">
<Cell small={2} large={4}>4 columns</Cell>
<Cell small={4} large={4}>4 columns</Cell>
<Cell small={6} large={4}>4 columns</Cell>
</Grid>
Updating the docs to reflect this would save a lot of headaches for foundation newbies like myself.
Appreciate all the work you've put into this!
Createt a column with pushOnSmall={4} and pushOnMedium={0}
Rendered HTML:
<div class="small-push-4 medium-push-0" ></div>
Rendered HTML:
<div class="small-push-4" ></div>
0.6.8
This is the offending line (line 92 in grid.js):
props.pushOnMedium ? `medium-push-${props.pushOnMedium}` : null,
0 evaluates to false and class is not added. This also applies to a bunch of other classes.
I currently add className={"medium-push-0"} to my column as a workaround, but I would prefer a more uniform option.
Installed react foundation
It to work
Objects would load without styles or functionally. CSS and js didn't look like it was loaded. Objects used were Link, Button, and Colors. No colors were added to any of the objects during render.
Latest as of today's date
Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.
code goes here
Is there a way to add custom breakpoints?
In my current SCSS version of foundation, I just have to add another line with the name of the breakpoint and size.
Surely there is a way to do this with this component?
Installed react-foundation step-by-step;
import React, { Component } from 'react';
import { Column, Row } from 'react-foundation';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<div className="gridgrid">
<Row>
<Column small={3}>
<div>1</div>
</Column>
<Column small={3}>
<div>2</div>
</Column>
<Column small={3}>
<div>3</div>
</Column>
<Column small={3}>
<div>4</div>
</Column>
</Row>
</div>
</div>
);
}
}
export default App;
I expected to see a grid system with 1 row and 4 columns (as in the examle on https://react.foundation/).
When I look at the Foundation component's CSS in the browser, no CSS is applied. It looks like there's no foundation.css available. Al elements (columns) are placed under each other.
0.7.0
tried to use Tabs, TabItem, TabsContent, and TabPanel
display respective tabs' panel
Tabs appear but no content appears
latest
var Panel = React.createClass({
componentDidMount: function(){
$(document).foundation();
var control_dropdown = new Foundation.DropdownMenu($('.control-dropdown'));
},
render: function(){
return(
<Column large={this.props.size} className="panel">
<Row className="panel-heading">
<Column>
<h4 className="heading-title">Title</h4>
</Column>
<Column large={2} className="heading-controls" middleOnLarge>
<Menu className="control-dropdown dropdown control-menu" alignment={Alignments.RIGHT}>
<MenuItem><span className="fa fa-bar-chart" /></MenuItem>
<MenuItem>
<span className="fa fa-ellipsis-v" />
<Menu isVertical>
<MenuItem><a href={"#"}>Option1</a></MenuItem>
<MenuItem><a href={"#"}>Option2</a></MenuItem>
<MenuItem><a href={"#"}>Option3</a></MenuItem>
<MenuItem><a href={"#"}>Option4</a></MenuItem>
</Menu>
</MenuItem>
</Menu>
</Column>
</Row>
<Row className="content" centerOnLarge>
{this.props.children}
</Row>
</Column>
);
}
});
var DashPanel1 = React.createClass({
render: function(){
return (
<Panel size={5}>
<Column large={12}>
<Tabs>
<TabItem><a href={"#tab1"}>Table1</a></TabItem>
<TabItem><a href={"#tab2"}>Table2</a></TabItem>
</Tabs>
<TabsContent>
<TabPanel id={"tab1"}>
<div id={"table1"} />
</TabPanel>
<TabPanel id={"tab2"}>
<div id={"table2"} />
</TabPanel>
</TabsContent>
</Column>
</Panel>
);
}
});
Hello,
Thanks for this lib, awesome work !
I am starting to code the foundation off-canvas component, but I am bit confused on how to start.
As I understood while reading the Slider, Tooltip, Reveal, other JS Components issue's comments, the lib should re-code the JS Components without any JQuery dependency. My problem is that in the case off the off-canvas, the component make use of keyboard and media query javascript utilities. And sadly both of them use a JQuery dependency.
Even it can be fast to drop the jquery depencencies (use only $.find
, $.on
, $.off
) to make a vanilla dependency, should'nt it easier to rely on some well-tested vanilla libraries for foundation.utils.* ?
Foundation is undefined.
import Foundation from 'react-foundation'
console.log(Foundation)
=> undefined
I installed react-foundation
using npm install react-foundation --save
and confirmed it is added to package json. And node_modules
.
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-foundation": "^0.9.6",
"react-scripts": "2.1.3"
},
Logging react
in the same way returns a function.
I expected that would be able to add a something like this and have it work.
<div className="button-basics-example">
<Button color={Colors.SUCCESS}>Save</Button>
</div>
If I am using it wrong I apologize but as I perceive it, the docs suggest this this how it should be used.
The above component renders without any styles.
0.9.6
I am using create-react-app and react 16.7
. Please advise what I could be doing incorrectly.
Do you have plans to include Slider, Tooltip, Reveal, and the other components that require JS to create them?
Triggered a build with no code changes.
Build passes.
develop
I updated the react-foundation docs link 5791aa3
It's only a minor .md change, but an external dependency broke the build for Node.js 4.x (5.x passes):
npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants eslint@<2.3.0
https://travis-ci.org/nordsoftware/react-foundation/jobs/121088914#L183
eslint 2.7.0 was only released three days ago, so that looks like the trigger.
We have:
"babel-eslint": "^5.0.0",
"eslint": "^2.3.0",
https://github.com/nordsoftware/react-foundation/blob/develop/package.json#L57-L68
Starting a conversation:
Foundation 6.4 has been released with an all new grid and syntax so I guess the components need to be updated to support the new grid - probably with continued support for the existing - now legacy - float grid as people might still want to use it.
The new components shouldn't be too difficult to add and, without promising too much, I might be interested in helping out; I just don't want to encroach on any work someone else is already doing to that end.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.