{"id":12094,"library":"styled-is","title":"Styled-is Flag Utility for styled-components","description":"styled-is is a utility library designed to simplify conditional styling within `styled-components` by providing declarative functions for checking component props. It offers functions like `is`, `isNot`, `isOr`, and `isSomeNot` for boolean prop checks, as well as `match` for value-based prop comparisons. The current stable version, 1.3.0, indicates a mature and stable project focused on a specific use case within the `styled-components` ecosystem. The library aims to enable cleaner and more readable style definitions, reducing the need for verbose ternary operators or complex prop destructuring directly within styled templates. It ships with TypeScript types, enhancing the developer experience in TypeScript projects by providing strong type checking and IDE autocompletion.","status":"active","version":"1.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/yldio/styled-is","tags":["javascript","flag","flags","react","css","css-in-js","styled-components","typescript"],"install":[{"cmd":"npm install styled-is","lang":"bash","label":"npm"},{"cmd":"yarn add styled-is","lang":"bash","label":"yarn"},{"cmd":"pnpm add styled-is","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency of styled-components, essential for building React applications.","package":"react","optional":false},{"reason":"Peer dependency of styled-components, required for rendering React applications to the DOM.","package":"react-dom","optional":false},{"reason":"Core peer dependency; styled-is extends styled-components' functionality for conditional styling.","package":"styled-components","optional":false}],"imports":[{"note":"The primary function for checking if one or more boolean props are truthy. It is typically imported as the default export.","wrong":"import { is } from 'styled-is';","symbol":"is","correct":"import is from 'styled-is';"},{"note":"A named export used for checking when specified props are all falsey.","wrong":"import isNot from 'styled-is';","symbol":"isNot","correct":"import { isNot } from 'styled-is';"},{"note":"A named export for matching a prop's value against a specific string or a function's return value.","wrong":"import match from 'styled-is';","symbol":"match","correct":"import { match } from 'styled-is';"},{"note":"A named export for checking if *any* of the specified props are truthy.","wrong":"import isOr from 'styled-is';","symbol":"isOr","correct":"import { isOr } from 'styled-is';"}],"quickstart":{"code":"import is, { isNot, isOr, match } from 'styled-is';\nimport styled from 'styled-components';\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\n\nconst ThemedButton = styled.button`\n  padding: 10px 20px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 16px;\n  background-color: #eee;\n  color: #333;\n\n  ${is('primary')`\n    background-color: #007bff;\n    color: white;\n  `};\n\n  ${is('large')`\n    padding: 15px 30px;\n    font-size: 20px;\n  `};\n\n  ${isNot('disabled')`\n    &:hover {\n      opacity: 0.9;\n    }\n  `};\n\n  ${isOr('primary', 'secondary')`\n    font-weight: bold;\n  `};\n\n  ${match('variant', 'outline')`\n    border: 2px solid currentColor;\n    background-color: transparent;\n  `};\n\n  ${match('variant', 'text')`\n    background-color: transparent;\n    color: #007bff;\n    padding: 5px 10px;\n  `};\n\n  ${(props) =>\n    is('compact')(props) &&\n    `\n      padding: 5px 10px;\n      font-size: 14px;\n    `}\n`;\n\nfunction App() {\n  return (\n    <div>\n      <ThemedButton>Default Button</ThemedButton>\n      <ThemedButton primary>Primary Button</ThemedButton>\n      <ThemedButton primary large>Primary Large Button</ThemedButton>\n      <ThemedButton large disabled>Large Disabled Button</ThemedButton>\n      <ThemedButton variant=\"outline\" primary>Outline Primary</ThemedButton>\n      <ThemedButton variant=\"text\">Text Button</ThemedButton>\n      <ThemedButton compact>Compact Button</ThemedButton>\n      <ThemedButton primary compact>Primary Compact</ThemedButton>\n    </div>\n  );\n}\n\nconst container = document.getElementById('root');\nif (container) {\n  const root = createRoot(container);\n  root.render(<App />);\n} else {\n  console.error(\"Root element not found. Please ensure your HTML has a <div id='root'>.\");\n}","lang":"typescript","description":"This quickstart demonstrates how to use `styled-is` functions like `is`, `isNot`, `isOr`, and `match` to create conditionally styled `ThemedButton` components in a React application. It showcases various prop-based styling scenarios including simple booleans, combined booleans, value matching, and a dynamic compact size based on a prop, rendering several button variations."},"warnings":[{"fix":"Refer to the `styled-is` `package.json` for precise `styled-components` peer dependency versions. Upgrade or downgrade `styled-components` accordingly using `npm install styled-components@X.Y.Z` or `yarn add styled-components@X.Y.Z`.","message":"Ensure strict compatibility with your `styled-components` version. `styled-is` relies on `styled-components`' underlying API. Mismatches, especially between major `styled-components` versions (e.g., v4/v5 vs. v6+ which introduced breaking changes in module exports and prop handling), can lead to runtime errors or unexpected styling behavior. Always check the peer dependency range.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For explicit boolean `false` checks, use `isNot('propName')`. For specific values, use `match('propName', 'value')`. For complex logic, pass a function: `${is((props) => props.propName === true)`.","message":"When using `is('propName')`, `styled-is` checks for the *truthiness* of the `propName`. If you intend to match a specific boolean value (`true` or `false`) or a non-truthy value other than `false`/`null`/`undefined`/`0`/`''`, you might need to pass a function or use `match` for explicit value checking.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Prefix props intended only for styling with a dollar sign (e.g., `$primary` instead of `primary`) when defining your styled components. Alternatively, configure `shouldForwardProp` via `StyleSheetManager` or `styled.div.withConfig()` to filter props.","message":"In `styled-components` v6 and above, props not starting with `$` (transient props) that are passed to a styled component might be forwarded to the underlying DOM element, causing React warnings about unknown HTML attributes. While `styled-is` simplifies conditional logic, it doesn't automatically convert prop names to transient ones.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always define your styled components outside of the render method of your React components, typically at the top level of the file or in a separate styles file. This ensures they are created once and reused.","message":"Defining `styled-components` within a React render function can lead to performance issues and unexpected behavior (like losing DOM state) because React remounts the component on every render. This principle also applies to the usage of `styled-is` helpers within such dynamically created styled components.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Correct the import statement to use the default import syntax: `import is from 'styled-is';`","cause":"The default export `is` was imported as a named export in a CommonJS or bundled environment (e.g., `import { is } from 'styled-is';`).","error":"TypeError: (0 , styled_is__WEBPACK_IMPORTED_MODULE_0__.is) is not a function"},{"fix":"Ensure that any prop values affecting `styled-is` logic are consistent between server and client. For dynamic values that differ, consider using a `useState` hook with `useEffect` for client-side only effects, or use `suppressHydrationWarning` on the element if the mismatch is benign.","cause":"A mismatch in prop values or dynamic styling evaluation between server-side rendering (SSR) and client-side hydration, often due to non-deterministic logic or environment differences when `styled-is` functions are used with dynamic props.","error":"Warning: Prop `[your-prop-name]` did not match. Server: `[value1]`. Client: `[value2]`."},{"fix":"Ensure `import styled from 'styled-components';` is present at the top of your file. If using `styled-components` v6+, ensure you are using named imports: `import { styled } from 'styled-components';`.","cause":"The `styled` object from `styled-components` was not imported or correctly configured before attempting to use it to create a styled component.","error":"ReferenceError: styled is not defined"}],"ecosystem":"npm"}