Skip to content

Commit

Permalink
improve readme
Browse files Browse the repository at this point in the history
change dist to lib folder
change build proccess
  • Loading branch information
shaystern committed Jul 16, 2015
1 parent 57cddbe commit 8caff5c
Show file tree
Hide file tree
Showing 15 changed files with 381 additions and 1,188 deletions.
2 changes: 1 addition & 1 deletion Gruntfile.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ module.exports = (grunt) ->

config =
src: "src"
dist: "dist"
lib: "lib"
tmp: ".tmp"

@initConfig
Expand Down
29 changes: 16 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,20 @@
- Init the card element with any values
- The card element itself don't have to be a child of the form - it can be rendered anywhere

### How to install

- `npm install card-react`
- Add `card.css` file to your project's stylesheets. You can find it at `lib/` folder.

### Usage

To use, you'll need to include the Card.js and card.css files into your project. You can find them at `dist/` folder.
To use, you'll need to include card-react

```html
ReactCardFormContainer = require('card-react')
```

Once you've included those files, you can initialize react-card. you'll need to make the component the container of your form:
Once included, you can initialize card-react. you'll need to make the component the container of your form:

```jsx
<ReactCardFormContainer
Expand All @@ -41,10 +46,15 @@ formInputsNames={
}

// initial values to render in the card element
initialNumber='4242424242424242' // optional — default •••• •••• •••• ••••
initialCvc='123' // optional — default •••
initialExpiry='16/12' // optional — default ••/••
initialName='Michael Jordan' // optional — default FULL NAME
initialValues= {
{
number='4242424242424242' // optional — default •••• •••• •••• ••••
cvc='123' // optional — default •••
expiry='16/12' // optional — default ••/••
name='Random Name' // optional — default FULL NAME
}
}


// the class to add to the form input and the corresponding card element when the input is valid/invalid.
classes={
Expand All @@ -68,13 +78,6 @@ formatting={true} // optional - default true
</ReactCardFormContainer>
```

### Installing card-react from npm

If you're using npm, you can installreact-card with:

`npm install card-react`


### To see the example run:

- npm install
Expand Down
Loading

0 comments on commit 8caff5c

Please sign in to comment.