charbelrami

program = [ comment ], [ "port" ], "module", module_name, "exposing", "(", exposed_list, ")", { import_statement }, { declaration }, { comment };

module_name = identifier, { ".", identifier }, [ comment ];
exposed_list = identifier | "(", identifier, { ",", identifier }, ")", [ comment ] | "..";

import_statement = "import", module_name, [ import_alias ], [ "exposing", "(", exposed_list, ")" ], [ comment ];
import_alias = "as", identifier, [ comment ];

declaration = type_declaration 
            | type_alias_declaration 

charbelrami

import { useState, useContext } from 'react';
import { useDispatch, StoreContext } from 'redux-react-hook';

export default function useTodo() {
  const [newTodo, setNewTodo] = useState('');

  const store = useContext(StoreContext);
  const todos = store.getState();

  const dispatch = useDispatch();

charbelrami

import React from 'react';
import useTodo from '../logic-hooks/useTodo';
import TodoInput from '../components/TodoInput';
import TodoList from '../components/TodoList';

export default function TodoInterface() {
  const { todos, newTodo, setNewTodo, addTodo } = useTodo();

  return (
    <>

charbelrami

import React from 'react';

export default function TodoList({ todos }) {
  return (
    <ol>
      {todos.map((todo, index) => (
        <li key={index}>{todo.text}</li>
      ))}
    </ol>
  );

charbelrami

import React from 'react';

export default function TodoInput({ newTodo, setNewTodo, addTodo }) {
  return (
    <input
      type="text"
      onChange={e => setNewTodo(e.target.value)}
      onKeyDown={e => {
        if (e.key === 'Enter') {
          addTodo();

charbelrami

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version