Zentrix Documentation

Zentrix is a powerful, easy-to-use React library for creating dynamic animations and responsive layouts. Whether you're looking to animate elements or create flexible, grid-based layouts, Zentrix provides an intuitive API that integrates smoothly into your React projects.

Table of Contents

1. Installation
2. Components
   • Animate
   • Grid
   • ScrollAnimate
3. Advanced Usage
4. Contributing
5. License

Installation

To start using Zentrix, you’ll need to install it via npm:

1. Install via npm

npm install zentrix

2. Install via yarn (alternative)

yarn add zentrix

After installation, you can start importing the components into your React project.

Components

1. Animate

The Animate component is used to apply CSS animations to child components. You can customize the animation and its duration.

Usage

import { Animate } from 'zentrix';

const App = () => (
  <Animate animation="fadeIn" duration="2s">
    <div>Hello, World!</div>
  </Animate>
);

Props

| Name | Type | Description | Default | |------------|----------|--------------------------------------------------|-------------| | animation| string | The name of the CSS animation (e.g., fadeIn) | Required | | duration | string | Duration of the animation (e.g., 1s) | 1s | | children | node | Content to be wrapped and animated | Required |

2. Grid

The Grid component helps create flexible, responsive grid layouts using CSS Grid. It accepts columns to define the grid layout and gap for spacing between items.

Usage

import { Grid } from 'zentrix';

const App = () => (
  <Grid columns="repeat(auto-fill, minmax(300px, 1fr))" gap="20px">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </Grid>
);

Props

| Name | Type | Description | Default | |------------|----------|--------------------------------------------------|-------------| | columns | string | CSS grid template columns (e.g., 1fr 1fr) | Required | | gap | string | The gap between grid items (e.g., 10px) | 16px | | children | node | Grid items to be placed within the grid | Required |

3. ScrollAnimate

The ScrollAnimate component is used to trigger animations when the user scrolls past a specific point on the page.

Usage

import { ScrollAnimate } from 'zentrix';

const App = () => (
  <ScrollAnimate animation="fadeInUp" offset={150}>
    <div>Scroll to see me fade in!</div>
  </ScrollAnimate>
);

Props

| Name | Type | Description | Default | |------------|----------|--------------------------------------------------|-------------| | animation| string | The CSS animation to trigger on scroll | Required | | offset | number | The scroll offset at which the animation starts | 200 | | children | node | Content to animate on scroll | Required |

Advanced Usage

Custom Animations with Keyframes

You can create custom animations using the utility provided by Zentrix. The createKeyframe function allows you to inject custom keyframe animations into the document.

Usage

import { createKeyframe } from 'zentrix/utils/motion';

createKeyframe(`
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
`);

const App = () => (
  <Animate animation="customAnimation" duration="1s">
    <div>This element will use your custom animation.</div>
  </Animate>
);

This feature lets you define and apply custom animations by defining keyframes dynamically.

Contributing

We welcome contributions to Zentrix! If you'd like to contribute, please follow these steps:

1. Fork the repository on GitHub.
2. Create a new branch (git checkout -b feature-branch).
3. Make your changes.
4. Run tests and ensure everything works.
5. Commit your changes (git commit -am 'Add new feature').
6. Push to your fork (git push origin feature-branch).
7. Create a pull request to the main branch.

Please ensure that you follow the code style and provide tests for any new features or changes.

License

Zentrix is licensed under the MIT License.

Example Code: Full App

Here's a complete example of using all three components in a React app:

import React from 'react';
import { Animate, Grid, ScrollAnimate } from 'zentrix';

const App = () => (
  <div>
    <Animate animation="fadeIn" duration="2s">
      <h1>Welcome to Zentrix</h1>
    </Animate>
    <Grid columns="repeat(3, 1fr)" gap="10px">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </Grid>
    <ScrollAnimate animation="fadeInUp" offset={150}>
      <p>This paragraph will appear as you scroll down!</p>
    </ScrollAnimate>
  </div>
);

export default App;

This example demonstrates how easy it is to integrate Zentrix into any React app to create animations, responsive layouts, and scroll-triggered effects.

Conclusion

With Zentrix, you can enhance your React projects by easily adding animations and flexible layouts. The library provides an intuitive API and components that streamline the development process. Whether you're animating elements or building responsive layouts, Zentrix has got you covered!

This documentation covers all the basics of Zentrix, and should serve as a helpful guide for anyone using the library.