Sign upLogin

jtassin/react-amount-field

View on GitHub
Star
examples/src/index.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="UTF-8">
    <title>React-amount-field by jtassin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<section class="page-header">
    <h1 class="project-name">React-opensource-component-template</h1>
    <h2 class="project-tagline"></h2>
    <a href="https://github.com/jtassin/react-opensource-component-template" class="btn">View on GitHub</a>
    <a href="https://github.com/jtassin/react-opensource-component-template/zipball/master" class="btn">Download .zip</a>
    <a href="https://github.com/jtassin/react-opensource-component-template/tarball/master" class="btn">Download .tar.gz</a>
</section>
 
<section class="main-content">
    <div class="container">
        <div class="row">
            <h2>Simple example with an input type number</h2>
            <div class="col-12">
                <div class="box-example">
          <pre>
             &lt;ReactAmountField onChange={(event) => {this.setState({ val: event.target.value })}} value={this.state.val} &gt;
              &lt;input type='number' /&gt;
             &lt;/ReactAmountField&gt;
          </pre>
                    <div id="example1">
                        <p>
                            To install React, follow the instructions on
                            <a href="https://github.com/facebook/react/">GitHub</a>.
                        </p>
                        <p>
                            If you can see this, React is <strong>not</strong> working right.
                            If you checked out the source from GitHub make sure to run <code>npm install</code>.
                        </p>
                    </div>
                </div>
            </div>
        </div>
 
 
        <div class="row">
            <h2>It also works with material-ui</h2>
            <div class="col-12">
                <div class="box-example">
          <pre>
             &lt;ReactAmountField onChange={(event) => {this.setState({ val: event.target.value })}} value={this.state.val} &gt;
              &lt;TextField hintText="I will be turned to an amount" /&gt;
             &lt;/ReactAmountField&gt;
          </pre>
                    <div id="example2">
                        <p>
                            To install React, follow the instructions on
                            <a href="https://github.com/facebook/react/">GitHub</a>.
                        </p>
                        <p>
                            If you can see this, React is <strong>not</strong> working right.
                            If you checked out the source from GitHub make sure to run <code>npm install</code>.
                        </p>
                    </div>
                </div>
            </div>
        </div>
 
        <div class="row">
            <h2>It works also with redux-form</h2>
            <div class="col-12">
                <div class="box-example">
                    <div id="redux-form">
                        <p>
                            To install React, follow the instructions on
                            <a href="https://github.com/facebook/react/">GitHub</a>.
                        </p>
                        <p>
                            If you can see this, React is <strong>not</strong> working right.
                            If you checked out the source from GitHub make sure to run <code>npm install</code>.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    <div class="row">
        <footer class="site-footer">
        <span class="site-footer-owner"><a href="https://github.com/jtassin/react-opensource-component-template">React-opensource-component-template</a> is maintained by <a
                href="https://github.com/jtassin">jtassin</a>.</span>
 
        <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a
                href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a
                href="https://twitter.com/jasonlong">Jason Long</a>.</span>
        </footer>
    </div>
 
</section>
</body>
</html>