https://github.com/iq-tech/spinetic

See the full documentation and test the carousel on the playground.
https://github.com/iq-tech/spinetic

Last synced: about 2 months ago
JSON representation

See the full documentation and test the carousel on the playground.

• Host: GitHub
• URL: https://github.com/iq-tech/spinetic
• Owner: IQ-tech
• Created: 2023-09-27T14:08:30.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-26T16:08:31.000Z (8 months ago)
• Last Synced: 2024-04-26T17:29:55.439Z (8 months ago)
• Language: TypeScript
• Homepage: https://iq-tech.github.io/spinetic/?path=/docs/pages-overview--documentation
• Size: 8.35 MB
• Stars: 19
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Codeowners: CODEOWNERS

Awesome Lists containing this project

README

        
# Spinetic 

## [Getting Started](https://iq-tech.github.io/spinetic/?path=/docs/pages-getting-started--documentation)

### Installation with npm

```shell

npm i react-spinetic

```

### Installation with yarn

```shell

yarn add react-spinetic

```

### Example Usage

1. Import the styles in your `main app.tsx` file:

```tsx

import "react-spinetic/styles.css";

```

2. Import the Spinetic components wherever you want to use them:

```tsx

import { Spinetic, SpineticItem } from "react-spinetic";

```

3. Use the following example to understand how to use Spinetic:

```tsx

function App() {

  const exampleItems = ['content-1', 'content-2', 'content-3', 'content-4', 'content-5'];

  return (

    

      {exampleItems.map((content, index) => (

        

          


            {content}

          

        

      ))}

    

  );

}


export default App;

```

Make sure to import the required styles, components, and configuration types. Then, use the `Spinetic` component and `SpineticItem` component to create a carousel. Customize the appearance and behavior of the carousel through the configuration options. Finally, map through your items and wrap them in `SpineticItem` components to display them within the carousel.

For more information, refer to the complete documentation and explore the carousel features in the playground by visiting the following link: [Spinetic Documentation](https://iq-tech.github.io/spinetic/?path=/docs/pages-overview--documentation).