React Password Input Playground

This repository was created for one of the Lace Tech Talks.

It tries to show different variations of password inputs that could be implemented in our applications and works as a sandbox to test potential memory leaks exposing the password.

Watch the Tech talk (requires access rights)

Note

Related issues:

• facebook/react#23214
• facebook/react#17581
• https://issues.chromium.org/issues/40109482

There are 2 branches: main and react17 (current Lace)

Important

This not as complex as the real-world application could be. If you have better proposals or examples worth sharing, please contribute. :)

How to run

If you have corepack enabled you should be able to start the app in 2 simple steps.

1. pnpm install
2. pnpm dev

Bootstrapped using Vite with React template

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});

• Replace tseslint.configs.recommended to tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked
• Optionally add ...tseslint.configs.stylisticTypeChecked
• Install eslint-plugin-react and update the config:

// eslint.config.js
import react from 'eslint-plugin-react';

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
});