new-reusable-ui-components
v2.0.7
Published
This project provides a minimal setup to get React working in Vite with HMR and some ESLint rules. It includes a reusable `ButtonWithIcon` component that can be easily integrated into your React projects.
Downloads
32
Readme
new-reusable-ui-components
This project provides a minimal setup to get React working in Vite with HMR and some ESLint rules. It includes a reusable ButtonWithIcon
component that can be easily integrated into your React projects.
Installation
To use this component in your project, first install the package:
npm install new-reusable-ui-components
Usage
Here is an example of how to use the components in your project:
import React from 'react';
import ButtonWithIcon from './components/ButtonWithIcon/ButtonWithIcon';
import Card from './components/Cards/Card';
const cardsData = [
{
icon: 'path/to/icon1.png',
title: 'Optimized Code',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
bgColor: '#1F2937',
textColor: '#ffffff',
},
{
icon: 'path/to/icon2.png',
title: 'Mobile Friendly',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
bgColor: '#1F2937',
textColor: '#ffffff',
},
{
icon: 'path/to/icon2.png',
title: 'Mobile Friendly',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
bgColor: '#1F2937',
textColor: '#ffffff',
},
{
icon: 'path/to/icon2.png',
title: 'Mobile Friendly',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
bgColor: '#1F2937',
textColor: '#ffffff',
},
];
const App = () => {
return (
<>
<div className="p-4">
<ButtonWithIcon
iconName="camera"
onClick={() => console.log('clicked')}
size="normal"
design="secondary"
position="right"
>
Dark Mode
</ButtonWithIcon>
</div>
<div className="card-container">
{cardsData.map((card, index) => (
<Card
key={index}
icon={card.icon}
title={card.title}
description={card.description}
bgColor={card.bgColor}
textColor={card.textColor}
/>
))}
</div>
</>
);
};
export default App;
PropTypes
The ButtonWithIcon component has the following PropTypes:
ButtonWithIcon.propTypes = {
iconName: PropTypes.string,
children: PropTypes.node.isRequired,
onClick: PropTypes.func,
position: PropTypes.oneOf(['left', 'right']),
size: PropTypes.oneOf(['xsmall', 'small', 'normal', 'large']),
design: PropTypes.oneOf(['primary', 'secondary', 'danger']),
};
Possible Props for ButtonWithIcon
iconName
(string): The name of the icon to display. Possible values are:dark
add
back
camera
close
children
(node, required): The content to display inside the button.onClick
(func): The function to call when the button is clicked.position
(one of: 'left', 'right'): The position of the icon relative to the text.size
(one of: 'xsmall', 'small', 'normal', 'large'): The size of the button.design
(one of: 'primary', 'secondary', 'danger'): The design style of the button.