React可定制黑暗模式切换开关组件

目录
  • 正文
  • 如何使用它。
    • 1.安装和下载
    • 2.导入DarkModeToggle组件
    • 3.将黑暗模式切换添加到应用程序中
    • 4.默认的组件道具
  • 预览

正文

一个用于React的可定制的黑暗模式切换开关组件。

如何使用它。

1.安装和下载

npm install @anatoliygatt/dark-mode-toggle @emotion/react @emotion/styled

2.导入DarkModeToggle组件

import { useState } from 'react';
import { DarkModeToggle } from '@anatoliygatt/dark-mode-toggle';

3.将黑暗模式切换添加到应用程序中

function Example() {
  const [mode, setMode] = useState('dark');
  return (
    <DarkModeToggle
      mode={mode}
      dark="Dark"
      light="Light"
      size="lg"
      inactiveTrackColor="#e2e8f0"
      inactiveTrackColorOnHover="#f8fafc"
      inactiveTrackColorOnActive="#cbd5e1"
      activeTrackColor="#334155"
      activeTrackColorOnHover="#1e293b"
      activeTrackColorOnActive="#0f172a"
      inactiveThumbColor="#1e293b"
      activeThumbColor="#e2e8f0"
      ariaLabel="Toggle color scheme"
      onChange={(mode) => {
        setMode(mode);
      }}
    />
  );
}

4.默认的组件道具

mode = 'dark',
dark,
light,
onChange,
size = 'sm', // lg, md
inactiveLabelColor = '#b9bdc1',
inactiveLabelColorOnHover = '#fcfefe',
inactiveLabelColorOnActive = '#cdd1d5',
activeLabelColor = '#5b5e62',
activeLabelColorOnHover = '#404346',
activeLabelColorOnActive = '#010101',
inactiveTrackColor = '#dce0e3',
inactiveTrackColorOnHover = '#fcfefe',
inactiveTrackColorOnActive = '#cdd1d5',
activeTrackColor = '#404346',
activeTrackColorOnHover = '#2d2f31',
activeTrackColorOnActive = '#141516',
inactiveThumbColor = '#2d2f31',
activeThumbColor = '#dce0e3',
focusRingColor = 'rgb(59 130 246 / 0.5)',
ariaLabel,

预览

The postDark Mode Toggle Component For Reactappeared first onReactScript.

以上就是React可定制黑暗模式切换开关组件的详细内容，更多关于React 黑暗模式切换的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • react component function组件使用详解

    react component function组件使用详解

    目录 不可改变性 虚拟dom与真实dom 函数组件 组件复用 纯函数 组件组合--组件树 组件抽离 不可改变性 1.jsx- 2.component(function)-component(class)-components(函数组件组合)-component tree(redux)-app(项目开发) 在react中,创建了js对象(react元素)就是不可更改的(immutable).就像是用相机拍照,相当于在此时间点已经定位了时间节点,只能拍下一张照片. 例如,使用底层react写一个时钟

  • React Native可定制底板组件Magic Sheet使用示例

    React Native可定制底板组件Magic Sheet使用示例

    目录 正文 如何使用它 1.安装并导入 2.基本使用方法 预览 正文 一个React Native组件,通过提供一个强制性的API,可以从应用程序的任何地方(甚至在组件之外)调用,以显示一个完全可定制的底部表单,并能够等待它解决并得到一个响应. 这个库依赖于Gorhom的/bottom-sheet 的模态组件,并接受相同的道具和儿童. 如何使用它 1.安装并导入 # Yarn $ yarn add react-native-magic-sheet # NPM $ npm i react-nati

  • 可定制React自动完成搜索组件Turnstone实现示例

    可定制React自动完成搜索组件Turnstone实现示例

    目录 正文 特点 如何使用它 1.安装并导入Turnstone 2.基本使用方法 3.默认的组件道具 预览 正文 一个高度可定制的.易于使用的React自动完成搜索组件. 特点 轻量级的React搜索框组件 用可定制的标题将来自多个API或其他数据源的搜索结果分组 指定列表框选项的最大数量,以及每组的加权显示比例 用你自己的React组件完全定制列表框选项.添加图片.图标.额外的子选项.按组或索引的不同视觉处理等等...... 在输入的文本下面显示typeahead自动建议文本 使用各种CSS方

  • React元素与组件的区别示例详解

    目录 从问题出发 元素与组件 元素 组件 问题如何解决 自定义内容 第一种实现方式 第二种实现方式 第三种实现方式 从问题出发 我被问过这样一个问题: 想要实现一个 useTitle 方法,具体使用示例如下: function Header() { const [Title, changeTitle] = useTitle(); return ( <div onClick={() => changeTitle('new title')}> <Title /> </div

  • 可定制react18 input otp 一次性密码输入组件

    可定制react18 input otp 一次性密码输入组件

    目录 正文 主要特点 基本用法 1.安装和导入 2.将OtpInput组件添加到应用程序中 3.所有默认的道具 预览 正文 一个完全可定制的.用于React驱动的应用程序的一次性密码(OTP).电话号码和pin码输入组件. 主要特点 它在React和ionic应用程序上都很好用.在手机上也能正常工作. 你可以用inputNum道具只指定数字输入. 在网页和手机上与剪贴板粘贴功能完美配合. npm上唯一支持'enter'键提交的OTP输入包. 在Android上没有OTP粘贴问题. 在iOS ch

  • React 高阶组件与Render Props优缺点详解

    目录 高阶组件 增强型高级组件 注入型高阶组件 高阶组件 VS Render Props 总结 高阶组件 高阶组件(HOC)是一个接受组件作为参数并返回一个新组件的函数,如果多个组件有相同的逻辑,将这些逻辑用函数封装,使它们能跨组件共用,这种用法称为高阶组件.下面的代码演示什么是高阶组件: export default function WithPrintLog(InnerComponent) { return class extends React.Component{ componentDi

  • React可定制黑暗模式切换开关组件

    React可定制黑暗模式切换开关组件

    目录 正文 如何使用它. 1.安装和下载 2.导入DarkModeToggle组件 3.将黑暗模式切换添加到应用程序中 4.默认的组件道具 预览 正文 一个用于React的可定制的黑暗模式切换开关组件. 如何使用它. 1.安装和下载 npm install @anatoliygatt/dark-mode-toggle @emotion/react @emotion/styled 2.导入DarkModeToggle组件 import { useState } from 'react'; impo

  • react render props模式实现组件复用示例

    react render props模式实现组件复用示例

    目录 一 render props的使用步骤 二 组件的复用 三 使用children名代替属性 一 render props的使用步骤 1 创建要复用的组件,在组件中提供要复用的状态逻辑代码2 将要复用的state作为方法的参数,暴露到组件外部 import React from "react"; import ReactDOM from "react-dom"; class App extends React.Component { render() { ret

  • AndroidQ(10)黑暗模式适配的实现

    前言:作为一个Android程序员,每年最期待就是Google的发布会啦!!这不,今年的AndroidQ如期而至.这里简单介绍一下Android的新特性: AndroidQ全局暗黑模式 隐私权限的更新 AndroidQ新版的手势导航(其实就是仿IOS) 系统日程UI的优化(还有其他系统UI上的优化) Google组件(jetpack)的推荐 每年的Google大会一结束就是程序员忙碌工作的开端,各种适配,各种新功能- 一堆事情下来,搞的焦头烂额. 但是今年的发布会之后,仔细一看Q的更新清单,其实

  • 详解React的回调渲染模式

    一.一个简单的小例子 1.父组件 <Twitter username='tylermcginnis33'> {(user) => user === null ? <Loading /> : <Badge info={user} />} </Twitter> 2.子组件框架 import React, { Component, PropTypes } from 'react' import fetchUser from 'twitter' // fetc

  • React实现一个通用骨架屏组件示例

    React实现一个通用骨架屏组件示例

    目录 骨架屏是什么? Demo 设计思路 具体实现 骨架屏是什么? 找到这里的同志,或多或少都对骨架屏有所了解,请容许我先啰嗦一句.骨架屏(Skeleton Screen)是一种优化用户弱网体验的方案,可以有效缓解用户等待的焦躁情绪. Demo 先看个demo 大概了解下最终的产物及其使用方式 npm install obiusm-react-components import { Skeleton } from 'obiusm-react-components'; <Skeleton isVi

  • Vue cli3 库模式搭建组件库并发布到 npm的流程

    市面上目前已有各种各样的UI组件库,比如 Element 和 iView ,他们的强大毋庸置疑.但是我们面临的情况是需求越来越复杂,当它们不能再满足我们需求的时候,这个时候就有必要开发一套属于自己团队的组件库了. 所以本文的目的就是让读者能通过此文,小能做一个简单的插件供人使用,大能架构和维护一个组件库不在话下. 以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程. vColorPicker 插件 DEMO 一.技术栈 如何通过新版脚手架创建项目,这里就不提了

  • 手把手教您实现react异步加载高阶组件

    本篇文章通过分析react-loadable包的源码,手把手教你实现一个react的异步加载高阶组件 1. 首先我们想象中的react异步加载组件应该如何入参以及暴露哪些API? // 组件应用 import * as React from 'react'; import ReactDOM from 'react-dom'; import Loadable from '@component/test/Loadable'; import Loading from '@component/test/

  • React如何利用Antd的Form组件实现表单功能详解

    React如何利用Antd的Form组件实现表单功能详解

    一.构造组件 1.表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等. 这里先引用了封装的表单域 <Form.Item /> 2.使用Form.create处理后的表单具有自动收集数据并校验的功能,但如果不需要这个功能,或者默认的行为无法满足业务需求,可以选择不使用Form.create并自行处理数据 经过Form.create()包装过的组件会自带this.props.form属性,this.props.form提供了很多API来处理数据,如getFieldDe

  • React antd tabs切换造成子组件重复刷新

    React antd tabs切换造成子组件重复刷新

    描述: Tabs组件在来回切换的过程中,造成TabPane中包含的相同子组件重复渲染,例如: <Tabs activeKey={tabActiveKey} onChange={(key: string) => this.changeTab(key)} type="card" > <TabPane tab={"对外授权"} key="/authed-by-me"> <AuthedCollections colle

  • react使用antd的上传组件实现文件表单一起提交功能(完整代码)

    react使用antd的上传组件实现文件表单一起提交功能(完整代码)

    最近在刚刚开始使用react做项目,非常不熟练,非常小白.小白同学可以阅读了,因为我会写的非常简单,直白. 项目中需要实现表单中带附件提交,上传文件不单独保存调接口. import { Form, Button, Upload } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; const normFile = (e) => { console.log('Upload event:', e); if (Array.

随机推荐