Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tylerbarker/tw_screen_size
A tiny LiveView widget showing the current screen dimensions and Tailwind breakpoint 🖼️
https://github.com/tylerbarker/tw_screen_size
elixir phoenix-framework phoenix-liveview tailwind tailwindcss
Last synced: 8 days ago
JSON representation
A tiny LiveView widget showing the current screen dimensions and Tailwind breakpoint 🖼️
- Host: GitHub
- URL: https://github.com/tylerbarker/tw_screen_size
- Owner: tylerbarker
- License: mit
- Created: 2024-04-24T14:51:56.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-06-20T12:52:05.000Z (6 months ago)
- Last Synced: 2024-12-18T01:45:08.674Z (8 days ago)
- Topics: elixir, phoenix-framework, phoenix-liveview, tailwind, tailwindcss
- Language: Elixir
- Homepage: https://hex.pm/packages/tw_screen_size
- Size: 16.6 KB
- Stars: 38
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# TwScreenSize
A 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)).
## Installation
Prerequisites: Your LiveView application must already be using TailwindCSS.
1. Install the package from Hex by adding `tw_screen_size` to your list of dependencies in `mix.exs`:
```elixir
def deps do
[
{:tw_screen_size, "~> 1.0.0"}
]
end
```
2. Ensure Tailwind searches for styles in the `tw_screen_size` package:
```js
// assets/tailwind.config.js
module.exports = {
content: [
"../deps/tw_screen_size/**/*.{ex,js}", // <--- Add this line
],
...
}
```
3. Import and integrate the `TwScreenSizeHook` in your `app.js`:
```js
// assets/app.js
// import the hook
import { TwScreenSizeHook } from "../../deps/tw_screen_size/assets/js/hooks";
let liveSocket = new LiveSocket("/live", Socket, {
hooks: { ...OtherHooks, TwScreenSizeHook }, // <--- Add TwScreenSizeHook here
params: { _csrf_token: csrfToken },
});
```
4. Extend your `dev.exs` configuration to enable the component in development only:
```elixir
# dev.exs
config :my_app, tw_screen_size: true
```
5. Import TwScreenSize, and add the component to your root layout:
```elixir
# layouts.ex
defmodule MyAppWeb.Layouts do
use MyAppWeb, :html
import TwScreenSize
embed_templates "layouts/*"
end
```
```heex
<%= @inner_content %>
<.tw_screen_size :if={Application.get_env(:my_app, :tw_screen_size)} />
```
## Opacity Timeout
The 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:
```elixir
<.tw_screen_size
:if={Application.get_env(:my_app, :tw_screen_size)}
opacity_timeout={3000}
/>
```
## All Attributes
```elixir
attr :base_class, :string,
default:
"items-center space-x-2 rounded-full bg-black px-2.5 py-1 font-mono text-xs font-medium text-white",
doc:
"Override the default styling with a custom class. This is appended to the always required classes: `hidden fixed opacity-0 transition-opacity z-[999]`."
attr :placement_class, :string,
default: "bottom-5 left-5",
doc:
"Classes to determine where the screen size component is placed on the screen. Defaults to `bottom-5 left-5`."
attr :transition_duration_class, :string,
default: "duration-300",
doc: "The Tailwind transition duration class. Defaults to `duration-300`."
attr :opacity_timeout, :integer,
doc:
"Make the component 100% transparent after this timeout in milliseconds. Becomes visible on initial page load and during resizes. Disabled by default."
```
Documentation can be generated with [ExDoc](https://github.com/elixir-lang/ex_doc)
and published on [HexDocs](https://hexdocs.pm). Once published, the docs can
be found at .