my-design-system-for-poc
v0.1.14
Published
Below are the main components included in the My Design System library, along with their props and usage examples.
Downloads
21
Readme
Below are the main components included in the My Design System library, along with their props and usage examples.
Button A customizable button component.
Props:
onClick: Function - Function to call on button click. children: ReactNode - The content of the button. Example:
import { Button } from 'my-design-system';
function App() {
return <Button onClick={() => console.log("Button clicked!")}>Click me!</Button>;
}
Input A simple input component for user text input.
Props:
value: string - The input value. onChange: Function - Function to call on input change. Example:
import { Input } from 'my-design-system';
function App() {
return <Input value="Hello" onChange={(e) => console.log(e.target.value)} />;
}
TextArea A text area component for multiline text input.
Props:
value: string - The text area value. onChange: Function - Function to call when the text changes. Example:
import { TextArea } from 'my-design-system';
function App() {
return <TextArea value="Enter text here" onChange={(e) => console.log(e.target.value)} />;
}
Select A select component to provide dropdown options.
Props:
options: Array<{ value: string, label: string }> - The options for the select. onChange: Function - Function to call when an option is selected. value: string - The current selected value. Example:
import { Select } from 'my-design-system';
function App() {
const options = [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' }
];
return <Select options={options} value="option1" onChange={(e) => console.log(e.target.value)} />;
}
Contributing We welcome contributions to improve My Design System! Please feel free to fork the repository, make changes, and submit pull requests.