react-win-grid

A lightweight and customisable Windows 10 Grid Component for ReactJS to give a native windows look to your web apps.

Table of contents

• Changelog
• Installation
• Getting Started
• WinItem
• WinGrid
• DEMO

Changelog

• @1.0.* - First stable version

Installation

npm install react-win-grid

Getting Started

import { WinGrid, WinItem } from 'react-win-grid';

OR

const { WinGrid, WinItem } = require('react-win-grid');

WinItem

This is a button component. Use this for individual clickable/hoverable items in your layout. This can be used inside of WinGrid or as a standalone component. Below is a list of props (optional) you can pass to the component.

| props | description | type | acceptable values | | ---------------- | -------------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------ | | backgroundColors | Colors that will be applied as gradient on background on mouse hover | Array of strings | All color values supported by CSS | | borderColors | Colors that will applied as gradient on borders on mouse hover | Array of strings | All color values supported by CSS | | borderWidth | Border thickness in pixels | Number | Any positive number | | className | HTML class attribute equivalent | String | - | | contentIsImage | This prop is recommended when the child is any image element. | Boolean | true \| false | | disabled | Disable the WinItem | Boolean | true \| false | | eventHandlers | Event Handlers for the component | Object | key should be valid React event names and value will be the event handler function | | onlyBackground | Don't apply hover effect on borders | Boolean | true \| false | | onlyBorders | Don't apply hover effect on background | Boolean | true \| false | | style | CSS styles for the component | Object | Valid css properties (camelCased) |

⚠ Note: Adding the contentIsImage prop to WinItem will not allow events to pass down to its children elements as this adds a layer on top of the image for hover effect to be visible. However, you can still set event handlers on the component itself by adding the eventHandlers prop. You can instead put image and non image in seperate WinItems

//The button will not receive click event
<WinItem contentIsImage>
	<img
		src='https://picsum.photos/1920/1080/'
		alt='imagesc'
		style={{ maxWidth: `100%` }}
	/>
	<button onClick={() => console.log('click')}> I am unclickable</button>
</WinItem>

WinGrid

This is a CSS grid component with the Windows10 grid hover effect. Use this layout to arrange and all the items inside this component should be either WinItem or HTML elements. If you want to pass your react component to this, wrap it inside WinItem. All the props mentioned below are optional

| props | description | type | acceptable values | | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | borderColors | Colors that will applied as gradient on borders on mouse hover | Array of strings | All color values supported by CSS | | borderWidth | Border thickness in pixels | Number | Any positive number | | className | HTML class attribute equivalent | String | - | | directions | directions parameter specified in cursor-nearby-elements package | Number | Positive integers | | eventHandlers | Event Handlers for the component | Object | key should be valid React event names and value will be the event handler function | | highlightRadius | This value is like factor which multiplies with the original spotlight radius aka offset resulting in smaller or bigger radius | Object | Valid css properties (camelCased) | | offsetPoints | offsetPoints parameter specified in cursor-nearby-elements package | Array of floats | Positive float values (Refer the package for default value) | | shouldSkipAngle | shouldSkipAngle parameter specified in cursor-nearby-elements package | Number | Positive integers | | style | CSS styles for the component | Object | Valid css properties (camelCased) |

💡 Tip: Use the offsetPoints and directions props to fine tune the performance of the WinGrid based on your layout

DEMO