A UI effects library for modern web applications with optimized tree-shaking
npm install @radui/fxA UI effects library for modern web applications with optimized imports.
``bash`
npm install @radui/fx
This library uses a direct import pattern exclusively. This means you need to import components directly from their paths rather than from the package root.
1. Better Tree-Shaking: Direct imports enable bundlers to eliminate unused code more effectively, resulting in smaller bundle sizes.
2. Clear Dependencies: They make it explicit what's being imported, enhancing code readability.
3. Improved Build Performance: Direct imports can lead to faster build times by reducing unnecessary processing.
4. Type Safety: TypeScript can more accurately track imports and exports with this pattern.
`jsx
// ✅ Recommended - direct imports
import Fade from '@radui/fx/Fade';
import Slide from '@radui/fx/Slide';
// ❌ Not supported - importing from the package root
import { Fade, Slide } from '@radui/fx'; // This won't work!
`
The library is designed to be imported using direct component imports for better tree-shaking and bundle optimization:
`jsx
import Fade from "@radui/fx/Fade";
import Slide from "@radui/fx/Slide";
// Or utilities
import { createFadeAnimation } from "@radui/fx/Fade";
import { createSlideAnimation } from "@radui/fx/Slide";
function MyComponent() {
return (
$3
Access motion adapter utilities:
`jsx
import { createTransition } from "@radui/fx/utils/motion-adapter";
`$3
Get version information:
`jsx
import { version, getLibraryInfo } from "@radui/fx/version";console.log(
Using @radui/fx version: ${version});
`$3
`jsx
import { motion } from 'framer-motion'; // or from 'motion'
import { createFadeAnimation } from '@radui/fx/Fade';function MyComponent() {
const fadeVariants = createFadeAnimation({ duration: 0.8 });
return (
initial="hidden"
animate="visible"
variants={fadeVariants}
>
Fade me in!
);
}
`Available Components and Utilities
$3
`jsx
import Fade, { createFadeAnimation } from "@radui/fx/Fade";
`#### Properties
-
duration: Duration of the animation in seconds (default: 0.5)
- delay: Delay before the animation starts in seconds (default: 0)
- initialOpacity: Initial opacity value (default: 0)
- finalOpacity: Final opacity value (default: 1)
- easing: Easing function to use (default: "easeInOut")$3
`jsx
import Slide, { createSlideAnimation } from "@radui/fx/Slide";
`#### Properties
-
direction: Direction from which to slide ("up", "down", "left", "right") (default: "up")
- distance: Distance to slide in pixels (default: 50)
- duration: Duration of the animation in seconds (default: 0.5)
- delay: Delay before the animation starts in seconds (default: 0)
- easing: Easing function to use (default: "easeInOut")Documentation and Demo
The library includes a Storybook setup to demonstrate the animations and components:
`bash
Run Storybook locally
npm run storybook
`This will start Storybook on http://localhost:6006 where you can:
- View all available animations
- Experiment with different parameters
- See usage examples
- Test components in isolation
Development
$3
`bash
Clone the repository
git clone https://github.com/yourusername/rad-ui-fx.git
cd rad-ui-fxInstall dependencies
npm install
`$3
#### Storybook
`bash
Run Storybook development server
npm run storybook
or the shorthand
npm run sbBuild Storybook for deployment
npm run build-storybookDeploy Storybook to GitHub Pages
npm run deploy-storybook
`#### Development
`bash
Development with auto-recompile
npm run devBuild the library
npm run buildClean the build directory
npm run clean
`#### Testing
`bash
Run tests once
npm testRun tests in watch mode
npm run test:watchRun tests with coverage
npm run test:coverage
`#### Linting
`bash
Check for linting issues
npm run lintFix linting issues automatically when possible
npm run lint:fix
``MIT