{"_id":"@7span/phoenix-react-ui-header","_rev":"1-3847f9a69c7c523657f350d8a1bff307","name":"@7span/phoenix-react-ui-header","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@7span/phoenix-react-ui-header","version":"1.0.0","keywords":[],"author":{"name":"7span"},"license":"MIT","_id":"@7span/phoenix-react-ui-header@1.0.0","maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"homepage":"https://github.com/akshay-7span/react-component-library#readme","bugs":{"url":"https://github.com/akshay-7span/react-component-library/issues"},"dist":{"shasum":"cd600f1c59ab21f1c6b64d982941d4d5ed664589","tarball":"https://registry.npmjs.org/@7span/phoenix-react-ui-header/-/phoenix-react-ui-header-1.0.0.tgz","fileCount":5,"integrity":"sha512-EeKgXsZPrOlZPRTh36afV4EIFk5HdZum2bjtDCrhQ4Ilit+KMx0/oCYmWcDmQA+4+IKQ3ecroSvEsBP7zeArIg==","signatures":[{"sig":"MEUCIQCbKCyJBIog+RqpkBWr6GRDABLUvmxZqTw7Ofk3wxt5jAIgCC0ysHOqpn1xx8s5cuN6GzlI2l2LyY6HX9yge+8NU54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25326},"main":"index.js","gitHead":"d15635d1dc48377acd5f3d905181014eb0732d2f","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"theharsh","email":"mail@theharsh.in"},"repository":{"url":"git+https://github.com/akshay-7span/react-component-library.git","type":"git"},"_npmVersion":"8.19.3","description":"A customizable button component for React applications, built with MUI.","directories":{},"_nodeVersion":"18.13.0","dependencies":{"yaml":"^1.10.2","react":"^18.3.1","react-dom":"^18.3.1","react-router":"^6.23.1","@mui/material":"^5.15.20","@emotion/react":"^11.11.4","@emotion/styled":"^11.11.5","react-router-dom":"^6.23.1","@mui/icons-material":"^5.15.20"},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/phoenix-react-ui-header_1.0.0_1720786294248_0.6591600060302594","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@7span/phoenix-react-ui-header","version":"1.0.1","description":"A customizable header component for React applications, built with MUI.","main":"index.js","repository":{"type":"git","url":"git+https://github.com/akshay-7span/react-component-library.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":[],"author":{"name":"7span"},"license":"MIT","dependencies":{"react":"^18.3.1","react-router":"^6.23.1","react-dom":"^18.3.1","yaml":"^1.10.2","@emotion/react":"^11.11.4","@emotion/styled":"^11.11.5","@mui/icons-material":"^5.15.20","@mui/material":"^5.15.20","react-router-dom":"^6.23.1"},"bugs":{"url":"https://github.com/akshay-7span/react-component-library/issues"},"homepage":"https://github.com/akshay-7span/react-component-library#readme","devDependencies":{},"gitHead":"d15635d1dc48377acd5f3d905181014eb0732d2f","_id":"@7span/phoenix-react-ui-header@1.0.1","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-v7Z9q6AHWWhBVu8SM164PEojgaq/5zjFl75KIQrZwMsYhkmLG8J2Q7h4iiqHlJL8p0nxL+bx4kTeFXm1LwYdZQ==","shasum":"12ade855bffe9c089b045854c6f822e606e41366","tarball":"https://registry.npmjs.org/@7span/phoenix-react-ui-header/-/phoenix-react-ui-header-1.0.1.tgz","fileCount":5,"unpackedSize":25326,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXHImvkMTXQ3+gxOlhJNdVaZ71e10CrzMavCN9dXMCDAIhAKSgD49tcNr1wO1luRMSVGf0cxN3+6s+o64moxGmQO15"}]},"_npmUser":{"name":"theharsh","email":"mail@theharsh.in"},"directories":{},"maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/phoenix-react-ui-header_1.0.1_1720786364104_0.33986723465442426"},"_hasShrinkwrap":false}},"time":{"created":"2024-07-12T12:11:34.070Z","modified":"2024-07-12T12:12:44.447Z","1.0.0":"2024-07-12T12:11:34.429Z","1.0.1":"2024-07-12T12:12:44.258Z"},"bugs":{"url":"https://github.com/akshay-7span/react-component-library/issues"},"author":{"name":"7span"},"license":"MIT","homepage":"https://github.com/akshay-7span/react-component-library#readme","keywords":[],"repository":{"type":"git","url":"git+https://github.com/akshay-7span/react-component-library.git"},"description":"A customizable header component for React applications, built with MUI.","maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"readme":"# Custom Header Component\r\n\r\nHeader is a responsive React component designed using Material-UI. It features a customizable app bar that includes a logo, search bar, buttons, and an optional profile component. The component adapts to mobile view by providing a drawer menu.\r\n\r\n\r\n## Features\r\n\r\n- Responsive layout with support for mobile devices\r\n- Logo with a clickable link\r\n- Optional search bar\r\n- Configurable left and right buttons\r\n- Optional profile component\r\n- Mobile drawer for easy navigation on smaller screens\r\n## Installation\r\n\r\nInstall the package via npm:\r\n\r\n```bash\r\nnpm install @7span/phoenix-react-ui-header\r\n```\r\n\r\nOr via yarn:\r\n```bash\r\nyarn add @7span/phoenix-react-ui-header\r\n```\r\n\r\n## Usage\r\nHere's a basic example of how to use the custom Sidebar component in your React application:\r\n\r\n```\r\nimport React from 'react';\r\nimport Header from '@7span/phoenix-react-ui-header';\r\nimport { Avatar } from '@mui/material';\r\n\r\nconst ProfileComponent = () => (\r\n \r\n);\r\n\r\nconst App = () => {\r\n const handleSearch = (query) => {\r\n console.log('Search query:', query);\r\n };\r\n\r\n const handleLeftButtonClick = () => {\r\n console.log('Left button clicked');\r\n };\r\n\r\n const handleRightButtonClick = () => {\r\n console.log('Right button clicked');\r\n };\r\n\r\n return (\r\n }\r\n />\r\n );\r\n};\r\n\r\nexport default App;\r\n\r\n```\r\n\r\n## Props\r\n\r\n| Prop | Type | Default | Description |\r\n|---------------------|-----------|---------|-------------------------------------------------------|\r\n| `logo` | string | `null` | Path to the logo image |\r\n| `logoPath` | string | `/` | Path to navigate to when the logo is clicked |\r\n| `showSearchBar` | boolean | `true` | Whether to display the search bar |\r\n| `onSearch` | function | `null` | Function to handle search input changes |\r\n| `leftButtonText` | string | `null` | Text for the left button |\r\n| `rightButtonText` | string | `null` | Text for the right button |\r\n| `showLeftButton` | boolean | `true` | Whether to display the left button |\r\n| `showRightButton` | boolean | `true` | Whether to display the right button |\r\n| `onLeftButtonClick` | function | `null` | Function to handle left button clicks |\r\n| `onRightButtonClick`| function | `null` | Function to handle right button clicks |\r\n| `showProfile` | boolean | `false` | Whether to display the profile component |\r\n| `ProfileComponent` | element | `null` | Custom profile component to be displayed |\r\n\r\n\r\n## Customization\r\nYou can customize the styles of the Header component and its elements by modifying the sx prop in the component's JSX.\r\n\r\n## Images\r\n| Header Image |\r\n|:-:|\r\n|\r\n\r\n\r\n## Author\r\n- Jenish Dadhania\r\n\r\n## Contributing\r\nIf you would like to contribute to the project, please follow these steps:\r\n1. Fork the repository\r\n2. Create a new branch (git checkout -b feature/your-feature)\r\n3. Make your changes\r\n4. Commit your changes (git commit -m 'Add some feature')\r\n5. Push to the branch (git push origin feature/your-feature)\r\n6. Open a Pull Request\r\n\r\n\r\n## License\r\nThis project is licensed under the MIT License\r\n\r\n## Contact\r\nIf you have any questions or suggestions, feel free to open an issue or contact me directly at [yo@7span.com].\r\n\r\n\r\nMade with by 7span\r\n##### This `README.md` file provides comprehensive details about the Header component, including installation instructions, usage examples, prop descriptions, customization options, and the actual component code. Let me know if you need any more adjustments!\r\n\r\n","readmeFilename":"README.md"}