ojas-ui

@ojas-ui/card

A reusable text input component for React applications, built with TypeScript.

Installation

Install the package using npm:

npm install @ojas-ui/card

or using Yarn:

yarn add @ojas-ui/card

Usage

Import the OjasTextInput component and use it in your React application:

import React from "react";
import { OjasTextInput } from "@ojas-ui/card";

const App = () => {
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    console.log(event.target.value);
  };

  return (
    <div>
      <OjasTextInput
        value="test"
        name="firstName"
        onChange={handleChange}
        placeholder="First Name"
      />
    </div>
  );
};

export default App;

Props

Prop	Type	Default	Description
value	string		The value of the input field.
name	string		The name attribute of the input field.
onChange	(event: React.ChangeEvent<HTMLInputElement>) => void		Function to handle the change event.
placeholder	string	""	The placeholder text for the input field.
type	"text" | "password" | "email" | "number"	"text"	The type of the input field.
className	string	""	Additional class names for custom styling.
disabled	boolean	false	Whether the input field is disabled.
width	string | number	"100%"	The width of the input field.
height	string | number	40	The height of the input field.
borderRadius	number	4	The border radius of the input field.
fontSize	number	14	The font size of the input field.
padding	number	8	The padding inside the input field.
autoComplete	string	"off"	The autocomplete attribute of the input field.
maxLength	number		The maximum length of the input field.
readOnly	boolean	false	Whether the input field is read-only.
required	boolean		Whether the input field is required.
marginBottom	number		The bottom margin of the input field.
label	string		The label text for the input field.
border	string	"1px solid var(--form-border-color, #dbdfe9)"	The border of the input field.
backgroundColor	string	"transparent"	The background color of the input field.
icon	React.ReactNode		An optional icon to display inside the input field.
iconPosition	"left" | "right"	"left"	The position of the icon inside the input field.

Customization

The OjasTextInput component is designed to be easily customizable. You can pass additional class names through the className prop to style the component using your own CSS.

Example with Custom Styling

import React from "react";
import { OjasTextInput } from "@ojas-ui/card";
import "./customStyles.css";

const App = () => {
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    console.log(event.target.value);
  };

  return (
    <div>
      <OjasTextInput
        value="test"
        name="firstName"
        onChange={handleChange}
        placeholder="First Name"
        className="custom-input"
      />
    </div>
  );
};

export default App;

customStyles.css

.custom-input {
  border: 2px solid #4caf50;
  border-radius: 8px;
  padding: 10px;
}

Development

Building the Package

To build the package, run:

npm run build

Running Tests

To run the tests, use:

npm test

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Nagendra Goud Porumalla

Acknowledgements

Special thanks to all the contributors and the open-source community for their valuable contributions.