Module: React::FunctionComponent::API

Defined in:
lib/react/function_component/api.rb

Instance Method Summary collapse

Instance Method Details

#get_react_element(arg, &block) ⇒ Object Also known as: gre 



60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
# File 'lib/react/function_component/api.rb', line 60

def get_react_element(arg, &block)
  if block_given?
    # execute block, fetch last element from buffer
    %x{
      let last_buffer_length = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].length;
      let last_buffer_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1][last_buffer_length - 1];
      block.$call();
      // console.log("get_react_element popping", Opal.React.render_buffer, Opal.React.render_buffer.toString())
      let new_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].pop();
      if (last_buffer_element === new_element) { #{raise "Block did not create any React element!"} }
      return new_element;
    }
  else
    # element was rendered before being passed as arg
    # fetch last element from buffer
    # `console.log("get_react_element popping", Opal.React.render_buffer, Opal.React.render_buffer.toString())`
    `Opal.React.render_buffer[Opal.React.render_buffer.length - 1].pop()`
  end
end

#props ⇒ Object 



4
5
6
 
# File 'lib/react/function_component/api.rb', line 4

def props
  @native_props
end

#render_react_element(el) ⇒ Object Also known as: rre 



81
82
83
84
85
86
 
# File 'lib/react/function_component/api.rb', line 81

def render_react_element(el)
  # push el to buffer
  `Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(el)`
  # `console.log("render_react_element pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString())`
  nil
end

#to_n ⇒ Object 



89
90
91
 
# File 'lib/react/function_component/api.rb', line 89

def to_n
  self
end

#use_callback(deps, &block) ⇒ Object 



8
9
10
 
# File 'lib/react/function_component/api.rb', line 8

def use_callback(deps, &block)
  `Opal.global.React.useCallback(function() { #{block.call} }, deps)`
end

#use_context(context) ⇒ Object 



12
13
14
15
 
# File 'lib/react/function_component/api.rb', line 12

def use_context(context)
  `(typeof context.$is_wrapped_context !== 'undefined')` ? context.to_n : context
  `Opal.global.React.useContext(native_context)`
end

#use_debug_value(value) ⇒ Object 



17
18
19
 
# File 'lib/react/function_component/api.rb', line 17

def use_debug_value(value)
  `Opal.global.React.useDebugValue(value)`
end

#use_effect(&block) ⇒ Object 



21
22
23
 
# File 'lib/react/function_component/api.rb', line 21

def use_effect(&block)
  `Opal.global.React.useEffect(function() { #{block.call} })`
end

#use_imperative_handle(ref, *deps, &block) ⇒ Object 



25
26
27
28
 
# File 'lib/react/function_component/api.rb', line 25

def use_imperative_handle(ref, *deps, &block)
  native_ref = `(typeof ref.$is_wrapped_ref !== 'undefined')` ? ref.to_n : ref
  `Opal.global.React.useImperativeHandle(native_ref, function() { #{block.call} }, deps)`
end

#use_layout_effect(&block) ⇒ Object 



30
31
32
 
# File 'lib/react/function_component/api.rb', line 30

def use_layout_effect(&block)
  `Opal.global.React.useLayoutEffect(function() { #{block.call} })`
end

#use_memo(*deps, &block) ⇒ Object 



34
35
36
 
# File 'lib/react/function_component/api.rb', line 34

def use_memo(*deps, &block)
  `Opal.global.React.useMemo(function() { #{block.call} }, deps)`
end

#use_reducer(inital_state, &block) ⇒ Object 



38
39
40
41
42
43
44
45
46
47
 
# File 'lib/react/function_component/api.rb', line 38

def use_reducer(inital_state, &block)
  state = nil
  dispatcher = nil
  %x{
    [state, dispatcher] = Opal.global.React.useReducer(function(state, action) {
      #{block.call(state, action)}
    }, initial_state);
  }
  [state, proc { |arg| `dispatcher(arg)` }]
end

#use_ref(native_ref) ⇒ Object 



49
50
51
 
# File 'lib/react/function_component/api.rb', line 49

def use_ref(native_ref)
  React::Ref.new(`Opal.global.React.useRef(native_ref)`)
end

#use_state(initial_value) ⇒ Object 



53
54
55
56
57
58
 
# File 'lib/react/function_component/api.rb', line 53

def use_state(initial_value)
  initial = nil
  setter = nil
  `[initial, setter] = Opal.global.React.useState(initial_value);`
  [initial, proc { |arg| `setter(arg)` }]
end