prepare v0.1.0

Author: ugogo

README.md

@@ -1,30 +1,42 @@
 # react-verification-code
 
-> Made with create-react-library
+A verification code input, autocompletion friendly
 
 [![NPM](https://img.shields.io/npm/v/react-verification-code.svg)](https://www.npmjs.com/package/react-verification-code) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
+## Examples
+
+- Basic - [CodeSandbox](https://codesandbox.io/s/basic-6ejdp) - [Source](https://github.com/ugogo/react-verification-code/tree/master/example/src/Basic.tsx)
+
 ## Install
 
 ```bash
 npm install --save react-verification-code
 ```
 
+```bash
+yarn add react-verification-code
+```
+
 ## Usage
 
 ```tsx
-import React, { Component } from 'react'
-
-import MyComponent from 'react-verification-code'
-import 'react-verification-code/dist/index.css'
+import * as React from 'react';
+import ReactVerificationCode from 'react-verification-code';
+import 'react-verification-code/dist/index.css';
 
-class Example extends Component {
-  render() {
-    return <MyComponent />
-  }
+export default function App() {
+  return <ReactVerificationCode />;
 }
 ```
 
+## API
+
+| Key         | Type      | Default | Description                     |
+| ----------- | --------- | ------- | ------------------------------- |
+| length      | `number`  | `4`     | How many items will be rendered |
+| placeholder | `Element` | `·`     | Element rendered when no value  |
+
 ## License
 
 MIT © [ugogo](https://github.com/ugogo)

example/package.json

@@ -10,11 +10,6 @@
     "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
   },
   "dependencies": {
-    "@testing-library/jest-dom": "link:../node_modules/@testing-library/jest-dom",
-    "@testing-library/react": "link:../node_modules/@testing-library/react",
-    "@testing-library/user-event": "link:../node_modules/@testing-library/user-event",
-    "@types/jest": "link:../node_modules/@types/jest",
-    "@types/node": "link:../node_modules/@types/node",
     "@types/react": "link:../node_modules/@types/react",
     "@types/react-dom": "link:../node_modules/@types/react-dom",
     "react": "link:../node_modules/react",

example/src/App.test.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import ReactVerificationCode from 'react-verification-code';
+import 'react-verification-code/dist/index.css';
+
+export default () => <ReactVerificationCode />;

example/src/App.tsx

@@ -6,9 +6,9 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

example/src/Basic.tsx

@@ -1,7 +1,12 @@
-import './index.css';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import BasicExample from './Basic';
+import './index.css';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <>
+    <BasicExample />
+  </>,
+  document.getElementById('root')
+);