0.0.1 • Published 4 years ago
indrafixui v0.0.1
indrafixui
Simple Ui
Install
npm install --save indrafixui
Usage
import React from 'react'
import {
ButtonIn,
InputIn,
CheckBoxIn,
RadioButtonIn,
HeaderIn,
CardIn
} from 'indrafixui'
import 'indrafixui/dist/index.css'
const App = () => {
const [isChecked, setChecked] = React.useState(false);
let logo = 'https://s.catch.com.au/static/catch/images/logo-8b0ef96c7b.svg'
let theLink = 'https://warungpintar.co.id/'
let myArrayCheckBox = [
{
"name": "One",
"value": "1",
},
{
"name": "Two",
"value": "2",
},
{
"name": "Tree",
"value": "3",
},
]
let listArray =
{
"id": "213a325e-2284-40cb-970d-3f69e295b395",
"name": "Apple Genuine Earpods with 3.5mm Plug",
"salePrice": 1800,
"retailPrice": 4500,
"imageUrl": "https://s.catch.com.au/images/product/0003/3901/5a8a6ff4bfd15691741540_w200.jpg",
"quantityAvailable": 32
}
function toogleCheck (evt) {
setChecked(!isChecked)
console.log(evt.target.value)
}
function changeValue (evt) {
console.log(evt.target.value)
}
return (
<div>
<HeaderIn logo={logo} addlink={theLink} />
<CardIn name={listArray.name} textTwo={listArray.salePrice} textTree={listArray.retailPrice} imageUrl={listArray.imageUrl}/>
<ButtonIn buttonName="Submit Dong Say" group="medium" />
<div className="center2">
<InputIn type="text" value="" label="this is label One" onChange={changeValue}/>
<InputIn model="two" type="text" value="" label="this is label Two" onChange={changeValue}/>
</div>
<h1>Check Box Component</h1>
<div className="center">
{myArrayCheckBox ?
myArrayCheckBox.map((item, index) => {
return (
<CheckBoxIn key={index} label={item.name} val={item.value} onClick={toogleCheck} />
)
})
:null}
</div>
<h1>Radio Buton Component</h1>
<div className="center">
{myArrayCheckBox ?
myArrayCheckBox.map((item, index) => {
return (
<RadioButtonIn key={index} label={item.name} val={item.value} onClick={toogleCheck} />
)
})
:null}
</div>
</div>
)
}
export default App
License
MIT © MIT