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 ✋ !

Table of Contents

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

License

This project is licensed under the MIT License - see the LICENSE.md file for details