React-switch-off-light NPM

React Switch Off Light

A tiny helper Light Manager

Many Websites provides a lot of contents, sometimes visitors want to focus on viewing just a specific content, if you have this issue this helper is the perfect for you ! This helper works as a light switch who can switch on or off the light of your targeted element !

Click me to see a demonstration ✋ !

Introduction

► Specifications :

• Easy to use 😉 • Place it anywhere in your code, it'll work 🎯 • All Browsers(IE, Firefox, Chrome ...) Support 🚀

► Actual & Upcoming Features :

☑️ Wrap Light Zone and Focused Zone Content ☑️ Supporting Multiple Switch Off Elements ⏹️ Display default Icon to trigger the action of switch off

Getting Started

It's simple whether you are a newbie or expert with React, just by following the instructions below you'll be able to use this library and do this cool stuff !

► Prerequisites

Since you are working with react, it's fine you'll not need to install any other dependancy, 'React >= 16.0' is the only dependancy of this helper 🤗.

► Installing

This package is available in npm repository as react-basic-items-pagination.

npm install react-switch-off-light --save

Or by Using Yarn.

yarn add react-switch-off-light --save

Now wherever you want in your project, you can import it

import FocusedContent from "react-switch-off-light";

► Example

It's so simple ;) , wrap the element you want to focus on ↓↓↓ check the example below ↓↓↓

The sample code to focus on box3 :

<div
    className="box2"
>
<FocusedContent.Component>
    <div
        className="box3"
    >
    My Content
    </div>
</FocusedContent.Component>
</div>

You can also choose the zone area where the light will be changed :

<FocusedContent.LightZone>
    <div
        className="box1"
    >
    <div
        className="box2"
    >
    <FocusedContent.Component>
        <div
            className="box3"
        >
        My Content
        </div>
    </FocusedContent.Component>
    </div>
</FocusedContent.LightZone>

Now, you can trigger the action by using :

<FocusedContent.LightZone>
    <div
        className="box1"
    >
    <div
        className="box2"
    >
    <FocusedContent.Component>
        <div
            className="box3"
        >
        <img
            src={LightIcon}
            className="light-icon"
            onClick={
            () => {
                // The action that trigger the switch off 
                // You can use it anywhere
                FocusedContent.switchOff();
            }
            }
        />
        My Content
        </div>
    </FocusedContent.Component>
    </div>
</FocusedContent.LightZone>

You can see the demonstration code in this link

Authors

Boumhicha El Mehdi - Initial work - Elmehdibm (Dear developers you're welcome to contribute in this work or just try this solution and leave some comments or maybe some stars to make the helper more available to everyone 🙏)