https://github.com/bixat/bixat-chip
A modern, customizable React chip component for creating interactive social media links and tags with icons. Built with TypeScript and CSS for maximum flexibility and type safety.
https://github.com/bixat/bixat-chip
Last synced: 8 months ago
JSON representation
A modern, customizable React chip component for creating interactive social media links and tags with icons. Built with TypeScript and CSS for maximum flexibility and type safety.
- Host: GitHub
- URL: https://github.com/bixat/bixat-chip
- Owner: bixat
- License: mit
- Created: 2023-12-05T08:25:51.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-31T21:19:12.000Z (10 months ago)
- Last Synced: 2025-02-06T22:33:16.614Z (10 months ago)
- Language: TypeScript
- Size: 9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bixat Chip
[](https://github.com/bixat/bixat-chip/blob/main/LICENSE)
[](https://www.npmjs.com/package/bixat-chip)
[](https://github.com/bixat/bixat-chip/commits)
A modern, customizable React chip component for creating interactive social media links and tags with icons. Built with TypeScript and CSS for maximum flexibility and type safety.
## Features
- Fully customizable colors with auto-opacity
- Custom link support
- Clean CSS without framework dependencies
- TypeScript support
- Lightweight and performant
## Screenshots
### Dark Mode
### Light Mode
## Installation
```bash
npm install bixat-chip
# or
yarn add bixat-chip
```
```tsx
import { BixatChip, TagType, BixatTags } from 'bixat-chip';
import { FaGithub } from 'react-icons/fa';
const githubTag: TagType = {
name: "GitHub",
textColor: "#333333",
icon: ,
website: "https://github.com/bixat"
};
// Example usage of predefined tags
const predefinedTag = BixatTags.github;
function App() {
return (
);
}
```
## Props
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `tag` | `TagType` | Yes | Tag configuration object |
| `link?` | `string` | No | Custom link (overrides tag.website) |
| `withTitle` | `boolean` | Yes | Toggle title visibility |
### TagType Interface
```typescript
interface TagType {
name: string; // Tag display name
textColor: string; // HEX color code
icon: ReactNode; // React icon component
website: string | undefined; // Default URL
}
```
## Examples
```tsx
import { BixatChip, TagType } from 'bixat-chip';
import { FaGithub, FaTwitter, FaLinkedin } from 'react-icons/fa';
const socialLinks = () => {
const tags: TagType[] = [
{
name: "GitHub",
textColor: "#333333",
icon: ,
website: "https://github.com/bixat"
},
{
name: "Twitter",
textColor: "#1DA1F2",
icon: ,
website: "https://twitter.com/bixat4dev"
}
];
return (
{tags.map(tag => (
))}
);
};
```
## Customizing Styles
```css
.bixat-chip-link {
/* Link styles */
}
.bixat-chip-container {
/* Container styles */
}
.bixat-chip-icon {
/* Icon styles */
}
.bixat-chip-title {
/* Title styles */
}
```
## Development
### Clone the repository
```git clone https://github.com/bixat/bixat-chip.git```
### Install dependencies
```npm install```
### Build the component
```npm run build```
## Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/add-tag`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/add-tag`)
5. Open a Pull Request
## License
MIT © [Bixat.dev](https://bixat.dev)