Comments (9)
I can look into the umd build. I haven't actually worked with umd before, but it does look like there are a few tools out there for it so it might be relatively painless.
from react-md.
Versions 0.3.1 and up should now support UMD. I have published 0.3.1 today. Let me know if you run into any problems.
from react-md.
from react-md.
Can you provide an example: how to use it?
from react-md.
If i am understanding UMD correctly, it is just a way to allow AMD and RequireJS. Here are some examples for AMD, RequireJS, and es6 module imports. I am assuming you can use ES6 in your project though.
// AMD
require(['react', 'react-dom', 'react-md/lib/Cards'], function(React, ReactDOM, Cards) {
const { Card, CardText } = Cards;
ReactDOM.render(
<Card>
<CardText>This is some text for a card</Card>
</Card>,
document.getElementById('app')
);
});
// RequireJS
const React = require('react');
const ReactDOM = require('react-dom');
const Cards = require('react-md/lib/Cards');
const { Card, CardText } = Cards;
ReactDOM.render(
<Card>
<CardText>This is some text for a card</Card>
</Card>,
document.getElementById('app')
);
// ES6 Modules
import React from 'react';
import ReactDOM from 'react-dom';
import { Card, CardText } from 'react-md/lib/Cards';
ReactDOM.render(
<Card>
<CardText>This is some text for a card</Card>
</Card>,
document.getElementById('app')
);
I am honestly guessing on the AMD implementation though. There aren't too many examples I can use to base that off of.I just know that my compiled sources in lib
reflect this article: http://davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/#umd-universal-module-definition
from react-md.
Actually, I want to use it in browser, for testing and learning purpose without create a whole new project.
For example, use React in a single html file.
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script src="node_modules/react/dist/react.js"></script>
<script src="node_modules/react-dom/dist/react-dom.js"></script>
<script src="node_modules/node_modules/babel-core/browser.js"></script>
<script type="text/babel">
class App extends React.Component {
render() {
return <div>hello</div>
}
}
ReactDOM.render(<App />, document.querySelector("#app"))
</script>
</html>
I think react use webpack to generate one single umd dist file.
from react-md.
Ahh ok. I didn't understand the ticket then. I'll reopen and set that up!
from react-md.
Ok, my latest pull request (and release 0.3.2+) will work in the browser or through the normal amd/requirejs/es modules imports.
I am not sure what version of babel
you are using since 6+ removed the browser support.. but i got it working using the babel-standalone.
So here was the index.html
I used.
<!DOCTYPE html>
<html>
<head><link href="node_modules/react-md/dist/react-md.css" rel="stylesheet"></head>
<body>
<div id="app"></div>
<script src="node_modules/react/dist/react-with-addons.js"></script>
<script src="node_modules/react-dom/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script>
<script src="node_modules/react-md/dist/react-md.js"></script>
<script type="text/javascript">
const input = `
const { Card, CardText } = ReactMD;
class App extends React.Component {
render() {
return (
<Card>
<CardText>Hello, world!</CardText>
</Card>
);
}
}
ReactDOM.render(<App />, document.querySelector("#app"));
`;
eval(Babel.transform(input, { presets: ['es2015', 'react', 'stage-0'] }).code);
</script>
</html>
So every component is now accessible through the global ReactMD
and you need to make sure to use the react-with-addons
instead of react
since this project relies on those peer dependencies.
from react-md.
It's working. Thank you very much.
I use babel 5, and they have discussed about supporting 'text/babel' type in babel-standalone
from react-md.
Related Issues (20)
- [Layout] loosing "rmd-utils--mouse" class on BODY when temporary navigation tree is closed
- FileInput default icon is `download`, should be `file_upload` HOT 1
- scrollable tabs dont work on RTL mode properly HOT 7
- Update useTextField to support manually checking the validity of the TextField/TextArea
- [Question] Can I change mouse hover timeout before tooltip appears? HOT 2
- Additional Form Support
- Remove required id prop from all components (requires React 18)
- tree does not have aria-selected attribute HOT 1
- How to use the documentation for packages? am i missing something? HOT 2
- Support automatic activation of tabs HOT 1
- NativeSelect label overlaps initial value HOT 1
- Tooltip still visible and stuck when transitioning to previous page
- Add Support for Material Symbols HOT 4
- SassError: argument `$color` of `red($color)` must be a color HOT 1
- Icon names are off by one within the material icons docs. HOT 2
- How to stop click event propagation on DropdownMenu
- Do not display check icon when chip is not selected in Filter Chips HOT 1
- v6.0.0 Status and Todos HOT 1
- Receiving "Error: Can't find stylesheet to import." error when upgrading from react-md v1 to v2 in a CRA app. HOT 2
- [Select] Not scrolling when there are many items HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-md.