0.2.6 • Published 5 years ago
@kamva/ui-kit v0.2.6
Kamva UI Kit
Installation
$ npm install --save-dev @kamva/ui-kit
buttons
example:
import React from "react";
import { Button, PrimaryButton } from "@kamva/ui-kit";
const Example = () => {
return (
<Button>primary</Button>
<PrimaryButton secondary>secondary button</Button>
<PrimaryButton round>?</Button>
) ;
}
Input Props
props | type | default |
---|---|---|
id | string. required | null |
label | string | null. if its passed render label with input |
isError | boolean | false. if will be true border color changes |
errorMsg | string OR null | false. if will be true border color changes |
ltr | boolean | false. |
💡 Fomrik example:
import React from "react";
import { Input } from "@kamva/ui-kit";
const Example = () => (
<div>
<h1>My Form</h1>
<Formik
initialValues={{ email: "eee", color: "red", firstName: "" }}
onSubmit={(values, actions) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
}, 1000);
}}
render={(props: any) => {
const { handleSubmit, email, values } = props;
return (
<form onSubmit={handleSubmit}>
<Input
type={"email"}
value={values.email}
name="email"
placeholder="Email"
id="email"
label={"hello"}
/>
<button type="submit">Submit</button>
</form>
);
}}
/>
</div>
);
CheckBox Props
props | type | default |
---|---|---|
id | string. required | null |
Alert
its just wrapper for react-alert
props | type | default |
---|---|---|
optionsReactAlert | options | defaultOption |
default options
const providerOptions = {
position: positions.TOP_CENTER,
timeout: 3000,
offset: "24px",
transition: transitions.fade,
};
usage
import React from "react";
import { AppAlert, useAlert } from "@kamva/ui-kit";
const App = () => {
const alert = useAlert();
return (
<div>
<button
onClick={() => {
alert.error(<p>عملیات با موفقیت انجام شد</p>);
}}
>
Show Alert
</button>
</div>
);
};
render(
<AppAlert>
<App />
</AppAlert>,
document.getElementById("root"),
);
0.2.6
5 years ago
0.2.5-alpha-08
5 years ago
0.2.5-alpha-07
5 years ago
0.2.5-alpha-06
5 years ago
0.2.5-alpha-05
5 years ago
0.2.5-alpha-04
5 years ago
0.2.5-alpha-03
5 years ago
0.2.5-alpha-02
5 years ago
0.2.5-alpha-01
5 years ago
0.2.5
5 years ago
0.2.4
5 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.9
5 years ago
0.1.8
5 years ago
0.1.7
5 years ago
0.1.6
5 years ago
0.1.5
5 years ago
0.0.1
5 years ago