wercker-component-button
v0.1.0-alpha.1
Published
This is the button component
Downloads
5
Readme
Wercker Component Button
enter a one line description on what this component is
insert screenshot of component
Installation
Add the component to your project:
yarn add wercker-component-buttonInclude the component:
import Button from 'wercker-component-button';
render() {
return <Button someKey="hello" />;
}Output
The build process builds a couple packages for use:
lib/index.js
This is meant to be used when webpack or a similar tool can process the source code to transform it from ES modules. The component is exported as the default export of the index file. The primary benefit is not including source that might not be needed.
Usage example:
import Button from 'wercker-component-button';
import 'wercker-component-button/dist/styles.css';
export default () => (
<Button someKey="Test 123" />
);Unless you're limited in the tools you can use you probably want to use the
lib/ version. The CSS is scoped to the component so it should not be
further processed through something like CSS modules.
dist/wercker-component-button.js
This contains a umd module that is supported by webpack, browserify, rollup, node.js, require.js and others. It aims to be a lower common denominator that can be used anywhere. No transpilation or other processing is required.
Usage example:
<html>
<head>
<title>Button UMD example</title>
<link rel="stylesheet" href="dist/styles.css"></link>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="https://npmcdn.com/[email protected]/dist/react.js"></script>
<script type="text/javascript" src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>
<script type="text/javascript" src="dist/wercker-component-button.js"></script>
<script type="text/javascript">
ReactDOM.render(
React.createElement(Button, {someKey: 'Test 123'}),
document.getElementById('root'),
);
</script>
</body>
</html>src/index.js
Props
The component accepts a number of props that customize its behavior:
| prop | description | type | required | default |
|-----------|----------------------|--------|----------|---------|
| someKey | just an example prop | string | no | |
Development
For development mode an example page is used to display the various states of the component. This page can also be useful for determining how to use the component's props.