A set of React Components + CSS Modules ❤️
See the component's examples at http://sullenor.github.io/teatime-components/
👋 In case you are going to update to React@16 — check the necessity of adding polyfills: https://reactjs.org/docs/javascript-environment-requirements.html
- What can be done with styles, should be done with styles.
- No global dependencies neither in JS nor in CSS.
- Possibility to mix particular styles without CSS Modules using
classNameproperty. - In case you want to overwrite the defined styles you may provide the
stylesproperty with custom class names or use the global referers (see the usage without CSS Modules). - Predictability.
- React
- React CSS Modules
- PostCSS
- autoprefixer
- postcss-url (for better experience)
Download the distributive via curl for example:
curl -O https://raw.githubusercontent.com/sullenor/teatime-components/0.8.14/dist/teatime.jsor the minified version:
curl -O https://raw.githubusercontent.com/sullenor/teatime-components/0.8.14/dist/teatime.min.jsSimply add react and react-dom scripts into your html page and the downloaded version of the teatime-components after:
<script src='https://unpkg.com/react@15/dist/react.js'></script>
<script src='https://unpkg.com/react-dom@15/dist/react-dom.js'></script>
<script src='teatime.js'></script>or the minified version:
<script src='https://unpkg.com/react@15/dist/react.min.js'></script>
<script src='https://unpkg.com/react-dom@15/dist/react-dom.min.js'></script>
<script src='teatime.min.js'></script>https://jsfiddle.net/r0byq6d8/
<!doctype html>
<html lang='en'>
<head>
<meta charset="utf-8">
<title>Awesome Button</title>
<script src='https://unpkg.com/react@15/dist/react.min.js'></script>
<script src='https://unpkg.com/react-dom@15/dist/react-dom.min.js'></script>
<script src='https://rawgit.com/sullenor/teatime-components/master/dist/teatime.min.js'></script>
</head>
<body>
<div id='entry'></div>
<script type='text/javascript'>
const createElement = React.createElement;
const render = ReactDOM.render;
render(createElement(Teatime.Button, {theme: 'action'}, 'Make Awesome'),
document.getElementById('entry'));
</script>
</body>
</html>Warning: Despite the fact that the published code is compatible with ECMAScript 5, it is highly recommended to include the babel-polyfill for the ECMAScript 6 constructor's basic methods (like String.startsWith and etc.).
Using npm do:
npm install teatime-componentsUsing webpack do:
const {resolve} = require('path');
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
],
},
entry: '...',
output: {
filename: 'index.js',
path: resolve('dist'),
},
};In order to remove various test helpers, which you don't need in your production environment, you should add the Webpack DefinePlugin to the plugins section. It will also decrease the bundle size and provide some performance. Configuration example:
plugins: [
// ...
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production'),
},
}),
],- React Component Specs and Lifecycle: https://facebook.github.io/react/docs/component-specs.html
- React Event System: http://facebook.github.io/react/docs/events.html
- React Forms: https://facebook.github.io/react/docs/forms.html
- React Controlled Components: https://facebook.github.io/react/docs/forms.html#controlled-components
- React Prop Validation: https://facebook.github.io/react/docs/reusable-components.html#prop-validation
- React Supported Attributes: https://facebook.github.io/react/docs/tags-and-attributes.html#supported-attributes
- CSS Modules: https://github.com/css-modules/css-modules#css-modules
- CSS Modules Composition: https://github.com/css-modules/css-modules#composition
- CSS Modules Values: https://github.com/css-modules/postcss-modules-values#css-modules-values
The MIT License