JSPM – social-floating-icons@1.0.0

Package Exports

social-floating-icons
social-floating-icons/dist/index.esm.js
social-floating-icons/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (social-floating-icons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A React component for displaying floating social media icons with customizable configuration.

Features

🎯 Easy to use - Simple React component with minimal setup
⚙️ Highly configurable - JSON-based configuration for social media links
🎨 Customizable styling - Support for Tailwind CSS classes
📱 Responsive - Works on all screen sizes
🎭 Smooth animations - Hover effects and transitions
🔧 TypeScript support - Full type definitions included
📦 Framework agnostic - Works with React, Next.js, and other frameworks

Installation

npm install social-floating-icons
# or
yarn add social-floating-icons

Quick Start

import { FloatingIcons } from 'social-floating-icons';

function App() {
  return (
    <div>
      <h1>My Website</h1>
      <FloatingIcons />
    </div>
  );
}

## Configuration

Create a JSON file (e.g., `social-links.json`) with your social media links:

```json
{
  "socialLinks": [
    {
      "name": "GitHub",
      "link": "https://github.com/yourusername",
      "icon": "FaGithub",
      "color": "text-gray-800 hover:text-gray-600",
      "want": true,
      "size": 30
    },
    {
      "name": "LinkedIn",
      "link": "https://linkedin.com/in/yourusername",
      "icon": "FaLinkedin",
      "color": "text-blue-600 hover:text-blue-500",
      "want": true,
      "size": 30
    },
    {
      "name": "Twitter",
      "link": "https://twitter.com/yourusername",
      "icon": "FaTwitter",
      "color": "text-blue-400 hover:text-blue-300",
      "want": false,
      "size": 30
    }
  ]
}

Usage Examples

Basic Usage

import { FloatingIcons } from 'social-floating-icons';

function App() {
  return <FloatingIcons />;
}

### With Custom Configuration

```jsx
import { FloatingIcons, loadConfig } from 'social-floating-icons';
import { useState, useEffect } from 'react';

function App() {
  const [config, setConfig] = useState(null);

  useEffect(() => {
    loadConfig('/social-links.json').then(setConfig);
  }, []);

  return config ? <FloatingIcons config={config} /> : null;
}

With Custom Props

import { FloatingIcons } from 'social-floating-icons';

function App() {
  return (
    <FloatingIcons
      position="left"
      showTooltips={true}
      spacing={20}
      animationDuration={400}
      zIndex={9999}
      className="my-custom-class"
    />
  );
}

### Inline Configuration

```jsx
import { FloatingIcons, createConfig } from 'social-floating-icons';

function App() {
  const config = createConfig([
    {
      name: "GitHub",
      link: "https://github.com/yourusername",
      icon: "FaGithub",
      color: "text-gray-800 hover:text-gray-600",
      want: true,
      size: 30
    }
  ]);

  return <FloatingIcons config={config} />;
}

Props

Prop	Type	Default	Description
`config`	`SocialLinksConfig`	`defaultConfig`	Configuration object for social media links
`position`	`'left' \| 'right'`	`'right'`	Position of the floating icons
`className`	`string`	`''`	Additional CSS classes
`showTooltips`	`boolean`	`true`	Whether to show tooltips on hover
`spacing`	`number`	`16`	Spacing between icons in pixels
`animationDuration`	`number`	`300`	Animation duration in milliseconds
`zIndex`	`number`	`1000`	Z-index for the floating container

Configuration Schema

SocialLink

Property	Type	Required	Description
`name`	`string`	✅	Display name of the social media platform
`link`	`string`	✅	URL to the social media profile
`icon`	`string`	✅	React icon component name from react-icons
`color`	`string`	✅	Tailwind CSS color classes for styling
`want`	`boolean`	✅	Whether to show this icon
`size`	`number`	❌	Size of the icon (default: 30)

Available Icons

The package supports all icons from react-icons. Common social media icons include:

FaGithub - GitHub
FaLinkedin - LinkedIn
FaTwitter - Twitter
FaInstagram - Instagram
FaYoutube - YouTube
FaFacebook - Facebook
FaDiscord - Discord
FaTwitch - Twitch
FaReddit - Reddit
FaTelegram - Telegram

Styling

The component uses Tailwind CSS classes for styling. You can customize colors by modifying the color property in your configuration:

{
  "color": "text-blue-600 hover:text-blue-500"
}

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

Development

# Install dependencies
npm install

# Start development mode
npm run dev

# Build the package
npm run build

# Clean build files
npm run clean

Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

License

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

Support

If you have any questions or need help, please open an issue on GitHub.

social-floating-icons