{"id":13576256,"url":"https://github.com/tylerbarker/tw_screen_size","last_synced_at":"2025-04-09T18:18:04.384Z","repository":{"id":235825187,"uuid":"791346147","full_name":"tylerbarker/tw_screen_size","owner":"tylerbarker","description":"A tiny LiveView widget showing the current screen dimensions and Tailwind breakpoint 🖼️","archived":false,"fork":false,"pushed_at":"2025-01-09T07:11:01.000Z","size":19,"stargazers_count":40,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-09T18:17:59.732Z","etag":null,"topics":["elixir","phoenix-framework","phoenix-liveview","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"https://hex.pm/packages/tw_screen_size","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tylerbarker.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-24T14:51:56.000Z","updated_at":"2025-03-26T11:00:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"2d1c6d75-3c86-43bb-b0d4-6f629073f10c","html_url":"https://github.com/tylerbarker/tw_screen_size","commit_stats":null,"previous_names":["tylerbarker/tw_screen_size"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tylerbarker%2Ftw_screen_size","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tylerbarker%2Ftw_screen_size/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tylerbarker%2Ftw_screen_size/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tylerbarker%2Ftw_screen_size/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tylerbarker","download_url":"https://codeload.github.com/tylerbarker/tw_screen_size/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248085326,"owners_count":21045139,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elixir","phoenix-framework","phoenix-liveview","tailwind","tailwindcss"],"created_at":"2024-08-01T15:01:08.461Z","updated_at":"2025-04-09T18:18:04.362Z","avatar_url":"https://github.com/tylerbarker.png","language":"Elixir","funding_links":[],"categories":["Elixir"],"sub_categories":[],"readme":"# TwScreenSize\n\n![tw_screen_size_gif](https://pub-0bd602de4141434f899c6f284446e48a.r2.dev/twScreenSize.gif)\n\nA tiny LiveView widget showing the current screen dimensions and Tailwind breakpoint. Ported from [Shayan Taslim](https://github.com/Sh4yy)'s React implementation (see [Gist](https://gist.github.com/Sh4yy/0300299ae60af4910bcb341703946330)).\n\n## Installation\n\nPrerequisites: Your LiveView application must already be using TailwindCSS.\n\n1. Install the package from Hex by adding `tw_screen_size` to your list of dependencies in `mix.exs`:\n\n```elixir\ndef deps do\n  [\n    {:tw_screen_size, \"~\u003e 1.1.0\"}\n  ]\nend\n```\n\n2. Ensure Tailwind searches for styles in the `tw_screen_size` package:\n\n```js\n// assets/tailwind.config.js\nmodule.exports = {\n  content: [\n    \"../deps/tw_screen_size/**/*.{ex,js}\", // \u003c--- Add this line\n  ],\n  ...\n}\n```\n\n3. Import and integrate the `TwScreenSizeHook` in your `app.js`:\n\n```js\n// assets/app.js\n\n// import the hook\nimport { TwScreenSizeHook } from \"../../deps/tw_screen_size/assets/js/hooks\";\n\nlet liveSocket = new LiveSocket(\"/live\", Socket, {\n  hooks: { ...OtherHooks, TwScreenSizeHook }, // \u003c--- Add TwScreenSizeHook here\n  params: { _csrf_token: csrfToken },\n});\n```\n\n4. Extend your `dev.exs` configuration to enable the component in development only:\n\n```elixir\n# dev.exs\nconfig :my_app, tw_screen_size: true\n```\n\n5. Import TwScreenSize, and add the component to your root layout:\n\n```elixir\n# layouts.ex\ndefmodule MyAppWeb.Layouts do\n  use MyAppWeb, :html\n  import TwScreenSize\n\n  embed_templates \"layouts/*\"\nend\n```\n\n```heex\n\u003c!-- root.html.heex --\u003e\n\u003c!-- ... --\u003e\n\u003cbody class=\"antialiased bg-white\"\u003e\n  \u003c%= @inner_content %\u003e\n  \u003c.tw_screen_size :if={Application.get_env(:my_app, :tw_screen_size)} /\u003e\n\u003c/body\u003e\n```\n\n## Opacity Timeout\n\nThe component is always visible by default. If you'd prefer it to appear temporarily on the first page-load, and on screen resizes, you can set the `:opacity_timeout` attribute:\n\n```elixir\n\u003c.tw_screen_size\n  :if={Application.get_env(:my_app, :tw_screen_size)}\n  opacity_timeout={3000}\n/\u003e\n```\n\n## All Attributes\n\n```elixir\nattr :base_class, :string,\n  default:\n    \"items-center space-x-2 rounded-full bg-black px-2.5 py-1 font-mono text-xs font-medium text-white\",\n  doc:\n    \"Override the default styling with a custom class. This is appended to the always required classes: `hidden fixed opacity-0 transition-opacity z-[999]`.\"\n\nattr :placement_class, :string,\n  default: \"bottom-5 left-5\",\n  doc:\n    \"Classes to determine where the screen size component is placed on the screen. Defaults to `bottom-5 left-5`.\"\n\nattr :transition_duration_class, :string,\n  default: \"duration-300\",\n  doc: \"The Tailwind transition duration class. Defaults to `duration-300`.\"\n\nattr :opacity_timeout, :integer,\n  doc:\n    \"Make the component 100% transparent after this timeout in milliseconds. Becomes visible on initial page load and during resizes. Disabled by default.\"\n```\n\nDocumentation can be generated with [ExDoc](https://github.com/elixir-lang/ex_doc)\nand published on [HexDocs](https://hexdocs.pm). Once published, the docs can\nbe found at \u003chttps://hexdocs.pm/tw_screen_size\u003e.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftylerbarker%2Ftw_screen_size","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftylerbarker%2Ftw_screen_size","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftylerbarker%2Ftw_screen_size/lists"}