Wercker-component-button NPM

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-button

Include 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/react@15.5.4/dist/react.js"></script>
    <script type="text/javascript" src="https://npmcdn.com/react-dom@15.5.4/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.

@everything-registry/sub-chunk-3141 @infinitebrahmanuniverse/nolb-wer

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago