The Turistikrota UI Kit
APACHE-2.0 License
Bot releases are hidden (Show)
Full Changelog: https://github.com/turistikrota/kit.ui/compare/v1.0.0...v1.1.1
Published by 9ssi7 10 months ago
Full Changelog: https://github.com/turistikrota/kit.ui/compare/0.9.0...v1.0.0
Published by 9ssi7 10 months ago
Full Changelog: https://github.com/turistikrota/kit.ui/compare/0.8.7...0.9.0
Published by 9ssi7 10 months ago
Full Changelog: https://github.com/turistikrota/kit.ui/compare/v0.8.6...0.8.7
Published by 9ssi7 11 months ago
Full Changelog: https://github.com/turistikrota/kit.ui/compare/v0.2.5...v0.8.6
Published by 9ssi7 about 1 year ago
We are excited to present the latest release of @turistikrota/ui, introducing an array of exciting new optimizations, bug fixes, and useful utilities to elevate your React applications! Version 0.2.5 comes with numerous enhancements and contributions from the community, making your development experience even more enjoyable.
deep-merge
, allowing for more sophisticated merging of objects. Many thanks to @ssibrahimbas for the implementation in Pull Request #123.find-diff
utility, which aids in identifying differences between objects. This utility was contributed by @ssibrahimbas in Pull Request #124.For a detailed comparison between version 0.2.0 and version 0.2.5, please refer to the Full Changelog.
To start leveraging the latest features and improvements, upgrade your @turistikrota/ui package to version 0.2.5 using your preferred package manager:
npm install @turistikrota/[email protected]
# or
yarn add @turistikrota/[email protected]
We appreciate the outstanding contributions from @ssibrahimbas and the entire community, making this release possible. We hope you enjoy using @turistikrota/ui version 0.2.5, and as always, happy coding! ππ
Published by 9ssi7 about 1 year ago
We are excited to present the latest release of @turistikrota/ui, introducing an array of exciting new features, bug fixes, and useful utilities to elevate your React applications! Version 0.2.0 comes with numerous enhancements and contributions from the community, making your development experience even more enjoyable.
deep-equal
, allowing for deep comparison of objects to determine equality. Many thanks to @ssibrahimbas for the implementation in Pull Request #105.markdown
utility, making it easier to parse and handle markdown content within the application. This utility was contributed by @ssibrahimbas in Pull Request #107.stars
component, contributed by @ssibrahimbas. This component allows you to display star ratings, perfect for showcasing user ratings and reviews. Check out the implementation details in Pull Request #108.feature-card
component, contributed by @ssibrahimbas. This component enables you to highlight various features or content in an elegant card format. See how it works in Pull Request #109.badge
component, thanks to the contribution by @ssibrahimbas. This component allows you to add badges or labels to your elements, providing additional context or information. Learn more in Pull Request #110.ImagePreview
component, thanks to the contribution by @ssibrahimbas. This component allows you to preview image list. Learn more in Pull Request #113.carousel-next
feature by adding various optimizations and improvements. Thanks to @ssibrahimbas for the valuable updates in Pull Request #111.sticky-section
feature, contributed by @ssibrahimbas. This feature allows you to create sections that stick to the viewport while scrolling, offering a more immersive user experience. Explore the implementation in Pull Request #112.sticky-section
feature with additional functionalities and improvements, thanks to @ssibrahimbas in Pull Request #113.infinite-scroll
hook, courtesy of @ssibrahimbas. This hook facilitates easy implementation of infinite scrolling behavior, perfect for loading additional content dynamically as the user scrolls down. Check out the implementation details in Pull Request #114.useInterval
hook. Check out the implementation details in Documentation
For a detailed comparison between version 0.1.5 and version 0.2.0, please refer to the Full Changelog.
To start leveraging the latest features and improvements, upgrade your @turistikrota/ui package to version 0.2.0 using your preferred package manager:
npm install @turistikrota/[email protected]
# or
yarn add @turistikrota/[email protected]
We appreciate the outstanding contributions from @ssibrahimbas and the entire community, making this release possible. We hope you enjoy using @turistikrota/ui version 0.2.0, and as always, happy coding! ππ
Published by ssibrahimbas about 1 year ago
We are thrilled to announce the latest release of @turistikrota/ui, introducing exciting new features and components to enhance your React applications! Version 0.1.5 brings two fantastic additions: SelectGroup and RadioGroup components, designed to simplify form interactions and improve user experience.
The SelectGroup component allows users to select one or more options from a dropdown list. It provides a user-friendly interface and can be easily integrated into your forms. With customizable titles and clear options, you can provide clearer instructions to users and allow them to reset their selections easily.
import SelectGroup from '@turistikrota/ui/form/select/group'
<SelectGroup title='Select Group' clear-text='Clear Filter'>
<SelectGroup.Item name='select-item' id='select-item-1' reversed>
Select 1
</SelectGroup.Item>
<SelectGroup.Item name='select-item' id='select-item-2' value reversed>
Select 2
</SelectGroup.Item>
<SelectGroup.Item name='select-item' id='select-item-3' reversed>
Select 3
</SelectGroup.Item>
</SelectGroup>
The RadioGroup component simplifies single-option selection within a group of radio buttons. It is perfect for scenarios where users need to make a single choice from multiple options. With intuitive styling and straightforward implementation, RadioGroup enhances the user experience in your applications.
import RadioGroup from '@turistikrota/ui/form/radio/group'
const OrderSection: React.FC<OrderSectionProps> = ({ selected, onSelect }) => {
// ... (your existing code)
return (
<RadioGroup title='Sort Order' clearText='Clear Selection' clearAriaLabel='Clear Selected Option'>
{orders.map((order, idx) => (
<RadioGroup.Item
key={idx}
id={`${order}-${idx}`}
name='order'
reverse
checked={currentOrder === order}
onChange={() => onSelect(order)}
>
{order}
</RadioGroup.Item>
))}
</RadioGroup>
)
}
To get started with the latest version of @turistikrota/ui, simply update your package to 0.1.5 using your favorite package manager.
npm install @turistikrota/[email protected]
# or
yarn add @turistikrota/[email protected]
Happy coding! ππ
Published by ssibrahimbas about 1 year ago
π New Feature Alert! π
useImageSrc
HookHey there, fellow developers! We are excited to announce a new feature in our latest release - the "useImageSrc" hook! π
With the useImageSrc
hook, you can now effortlessly manage image sources in your React applications using the power of React's built-in useState
hook. Whether you are using Next.js or Vite as your build tool, this hook is fully compatible and designed to work seamlessly in both environments.
The useImageSrc
hook comes with two main functionalities:
setDefaultImageSrc: Set a default image source that will be used in case of image loading errors or when the original image source is unavailable.
useImageSrc: A custom hook that allows you to use the default or custom image source in your components. If the provided image source encounters an error, it will automatically fallback to the default image source.
To start using the useImageSrc
hook in your React project, simply follow these steps:
@turistikrota/ui
v0.1.2 or higher:npm install @turistikrota/ui@latest
Import and use the hook in your components:
'use client'
import Image from 'next/image'
import { useImageSrc, setDefaultImageSrc } from '@turistikrota/ui/hooks/image'
setDefaultImageSrc('/path/to/dummy-image.png')
export default function MyComponent() {
const { src, onError } = useImageSrc('/path/to/image.png')
return (
<Image src={src} onError={onError} alt='Image' width={100} height={100} />
)
}
import { useImageSrc, setDefaultImageSrc } from '@turistikrota/ui/hooks/image'
setDefaultImageSrc('/path/to/dummy-image.png')
export default function MyComponent() {
const { src, onError } = useImageSrc('/path/to/image.png')
return (
<img src={src} onError={onError} alt='Image' />
)
}
The useImageSrc
hook offers a simple and elegant solution for handling image sources in your React applications. By setting a default image source, you ensure that your users always see a fallback image when the original one is not available or failed to load. This enhances the user experience and eliminates broken image issues on your website or web application.
Don't wait any longer to improve your image handling in React projects. Upgrade to the latest version and start using the useImageSrc
hook today! We're confident it will make your development process smoother and your users happier.
Happy coding! ππ
Published by ssibrahimbas about 1 year ago
π Turistikrota UI Kit v0.1.1 Release Notes π
We're thrilled to announce the release of version 0.1.1 of our UI Kit! This update introduces some exciting new components that will enhance your design and development experience. Let's take a closer look at the latest additions:
Top Header Component:
Introducing the Top Header component, a versatile and stylish navigation element that sits at the top of your web pages. It's designed to provide a seamless user experience and improve the overall visual appeal of your application. The Top Header is fully customizable, allowing you to tailor it to your specific brand and design requirements.
Mobile Header Component:
Our new Mobile Header component ensures that your application looks stunning on mobile devices as well. With a focus on responsiveness and user-friendliness, the Mobile Header makes navigation on smaller screens a breeze. It elegantly collapses and expands, adapting to different screen sizes, without compromising on functionality or aesthetics.
Error Page:
Error pages don't have to be dull anymore! We're excited to present the Error Page component, which will help you turn error moments into opportunities to showcase your brand's personality. Whether it's a 404 or a server error, the Error Page component lets you communicate with your users in a visually appealing and informative way.
π Other Enhancements:
π How to Get Started:
To start using version 0.1.1 of our UI Kit, you can either download it directly from our website or update it using package managers like npm or yarn. Check out our updated documentation for detailed instructions and examples on how to implement the new components.
π€ Community and Feedback:
We want to extend our heartfelt thanks to our fantastic community of developers and designers who have been actively providing feedback and suggestions. Your valuable input has shaped this release, making it better for everyone.
If you encounter any issues or have ideas for further improvements, please don't hesitate to reach out to us on our GitHub repository or join our community forum. We'd love to hear from you!
Stay tuned for more exciting updates in the near future! Happy designing and coding! π